Member Avatar for nairawebs

Hi everyone, i've always prefered round edge boxes to the conventional ones. Can anyone help me with the codes?

  • 3 Contributors
  • 4 Replies
  • 107 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Slade007

Dani AI

Generated

As asked about rounded-edge boxes, and following 's note about image corners and 's image-based example, the recommended modern approach is CSS3 border-radius. It removes extra markup and images, scales for responsive layouts, and is supported in current browsers. For historic support (IE8 and earlier) image fallbacks or polyfills remain options.

Basic rounded box example:

.box {
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
}

Only top corners (useful when mimicking 's top-only rounding):

.box--top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Common troubleshooting and tips:

  • Child images/content that should follow the curve can be clipped by the container: apply overflow: hidden to the rounded container and make inner images display: block; width: 100%;.
  • If a border/background shows square artifacts at the corners, try background-clip: padding-box (older WebKit prefixes are rarely needed today).
  • Avoid table-based layout for visual boxes; use semantic block elements (divs) and CSS.
  • For very complex shapes consider SVG or clip-path; for simple rounded corners border-radius plus box-shadow handles most needs.

Reference documentation and current browser support:
MDN: border-radius
Can I Use: border-radius

Recommended Answers

All 4 Replies

Member Avatar for JugglerDrummer

I think there is a weird way of doing it with CSS, but its not well supported. The way most professional sites do it is by using images to cover up the corners, that are transparent in the center. Or you can just use images for the whole corner of the box. There are several things like this in daniweb, the quick post box and the gray latest thread boxes on the right. :D

Member Avatar for nairawebs

Thanx for the reply, i appreciate it.

Member Avatar for Slade007

Using images are the best way...
Many sites have used images for rounding,
The above mentioned is also good, but i'f used this method...
Check the attachments for the html and the images used...
I only used rounding on the top corners...

1.gif 0.35 KB 2.gif 0.35 KB 3.gif 0.35 KB
Member Avatar for Slade007 
<html><body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td background="1.gif" width="5" height="50"></td>
<td background="2.gif" width="1028" height="50" align>You can type some thing here</td>
<td background="3.gif" width="5" height="50"></td>
</tr>
</tbody>
</table>
</body>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.