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”
In order to create the markup, we use the CSS pseudo elements :before and :after, the CSS properties content and background.
For this demonstration, the following images are used:
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.