Rounded corners in CSS

Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner techniques is that they require alteration of the HTML document itself, which means that retrofitting it onto an existing design may require a lot of effort.

However, there is a solution that will allow you to retrofit this to existing designs without altering any markup. Take a look at the following example.

The first images, from ten thousand kilometers away, brought to a halt the activities of all mankind. On a billion television screens, there appeared a tiny featureless cylinder, growing rapidly second by second. By the time it had doubled it’s size, no one could pretend any longer that Rama was a natural object.

— Arthur C. Clarke, “Rendezvous with Rama”

Generated content

In order to create the markup, we use the CSS pseudo elements :before and :after, the CSS properties content and background.

The images

For this demonstration, the following images are used:

Top left corner Top right cornerr Bottom left corner Bottom right corner

These images are true-color PNG images with an Alpha channel, so the corners will appear smooth, and the “inner” part of each corner is transparent, while the edges are white. This allows us to use the corners on rounded boxes of any colour.

The CSS

The top left and top right corners are created using the following CSS rule:


.rounded:before {
  background: transparent url(top-right.png) scroll no-repeat top right;
  margin-bottom: -20px;
  height: 30px;
  display: block;
  border: none;
  content: url(top-left.png);
  padding: 0;
  line-height: 0.1;
  font-size: 1px;
}

The bottom left, and the bottom right corners are created with a similar rule, only using the :after pseudo element:


.rounded:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(bottom-left.png);
  margin: 0 0 -1px 0;
  height: 30px;
  background: white;
  background: transparent url(bottom-right.png) scroll no-repeat bottom right ;
  padding: 0;
}

Known problems and compatibility

This technique works with browsers that support the :before and :after pseudoelements. This leaves MSIE out in the cold, but it should work fine in Opera and Mozilla.

What seems to be a rounding error in Mozilla 1.5 sometimes causes a 1px border to appear below the bottom left and right corners. This appears and disappears as the window is resized, and does not appear on all elements with rounded corners.

Safari’s rendering is shall we say, interesting, at best. Hard to describe. A screenshot is worth more than a thousand words.

It has been brought to my attention that Safari 1.1 renders this the same way Opera and Mozilla does. Yay!