Rounded corners in CSS

Modern, clever browsers that implement CSS 3 have a border-radius property that gives proper rounded corners. Recent versions of Internet Explorer, Firefox, Chrome, Safari and Opera all support it. Just add e.g. border-radius: 5px to the CSS for the element yo want to style, with 5px being a reasonable value. The bigger the value, the rounder your corners will be. The menu buttons on this site have border-radius: 6px

Sadly, older versions of Internet Explorer do not implement it at all and older versions of Firefox and Safari - do it their own sweet way. So much for standards.

You can catch the ones that have some support with CSS like this: -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px which is what was applied to the blockquote above.

The old way

If you really must have rounded corners visible in older browsers (Internet Explorerf 6, for instance), you can do it with some small graphic images, as below.

Rounded corners using CSS and some (x)HTML

If you don't mind putting rounded corners in to the mark-up, but don't want the kerfuffle of using a table, then this should work for you. Create a small rounded corner:

  1. With a graphics programme, create a circle 32 pixels in diameter.
  2. Invert the colours so the background becomes transparent.
  3. Crop it to the top left corner, giving a 16x16 pixel graphic called "top-left.gif"
  4. Save it, and rotate through 90 degrees to save 3 more graphics for the other corners: "top-right.gif", "bottom-left.gif", "bottom-right.gif".

Or steal these ones:


(right-click and Save Image)

Because we made the rounded corners transparent on a white background, we can use it to let any colour background show through.

If, as here, the background isn't white, you'll see the white in the graphic

Now, in your CSS, make a class for each corner:

.round-tl {
  background: url(top-left.gif) top left no-repeat;
}
.round-br {
  background: url(bottom-right.gif) bottom right no-repeat;
}
and so on.

Finally, in your html, start a div for each class and close them all after the content - see the source of this page, or below:

<DIV class=box>
 <DIV class=round-tl>
  <DIV class=round-tr>
   <DIV class=round-bl>
    <DIV class=round-br>
<P>Rounded corners using CSS and some (x)HTML, etc.</P>
    </DIV>
   </DIV>
  </DIV>
 </DIV>
</DIV>

If you don't want all the corners rounded, just leave the corresponding div out.