Pure CSS rounded corners for good browsers

080902

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...

Posted in: English, Web, CSS
Tags: generated content