Jump to main navigation


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

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

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

Add a comment


Allowed XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <p> <strike> <strong>


To prove you're a person (not a spam script), type the answer to the math equation shown in the picture. Click on the picture to hear an audio file of the equation.
Click to hear an audio file of the anti-spam equation =

Additional content and navigation

Categories

Main navigation menu