Rounded corners in CSS

Modern, clever browsers that implement CSS 3 have a border-radius property that gives proper rounded corners. Sadly, at time of writing, Internet Explorer does not implement it at all and others - Firefox, 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.
Otherwise, you can do it with some smal garaphic, 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.


♠ Powered by Whizzy CMS ♠