Jump to main navigation

Pure CSS rounded corners for good browsers


After exploring the possibility to add multiple background images to an element, I realized it was possible to use that technique to create boxes with rounded corners in a very clean, CSS-only way. In particular:

  • No need to add any extra markup.
  • No need to know the dimensions of the element. In fact the element can be resized freely, which makes it perfect for fluid layouts.
  • Pure CSS solution.

The catch is: this technique relies on the use of generated content, so it doesn't work in IE6 or IE7. Which makes it pretty much useless for real projects, unless for some reason you can ignore IE.

Still it's a nice technique, and with very clean code. Let's get into it:

<div class='round'>... content here ...</div>

This is one of the strengths of this technique: no need for any added markup. Now let's see the CSS:

.round {
  margin-top: 2em;
  border: 1px solid #5074ce;
  padding-left: 10px;
  padding-right: 10px;

.round:before, .round:after {
  display: block;
  background: no-repeat 100% 0;
  height: 10px;
  font-size: 0;

.round:before {
  content: url(round1.gif);
  background-image: url(round2.gif);
  margin: -1px -11px 0 -11px;

.round:after {
  content: url(round3.gif);
  background-image: url(round4.gif);
  margin: 0 -11px -1px -11px;

See the result here (remember: won't work in IE6/7).

You might want to read Multiple background images with CSS2 for an explanation of the basic principles of this technique.

The interesting bit here is the use of negative margins to position the :before and :after blocks over the border. In this example we want to move them 1px to the left and right, and 1px up (:before) or down (:after). But we also want some horizontal padding on the left and right of the DIV, so we need to compensate that as well, so the horizontal margins end up being 11px (10 for the DIV's padding, 1 for the border).

Will IE8 support generated content? I've heard it will. Still IE7 will last a long time. Sigh...

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

1 comment to “Pure CSS rounded corners for good browsers”

  1. #01 By leif halvard silli, 081215 at 02:14

    It appears to work in IE8 beta 2. Though there is also some bugs
    with it. I get rounded corners on the right side squares, but not
    on the left side corners (allthough, sometimes I get them even on
    the left side corners as well - but when I reload the page, it
    disappears). Also, there is a PNG transparency problem it seems ...

Additional content and navigation


Main navigation menu