There is the solution for rounded corners using pure CSS (very helpful for website designers, as for my mind). The CSS3 border-radius property allows to create rounded corners without images using multiple div tags. It works in Firefox, Safari/Chrome, Opera and IE9.
According to W3C Specification the ‘border-radius’ properties:
border-radius: [ <length> | <%> ] [ <length> | <%> ]
Applies to: all elements
Percentages: refer to corresponding dimension of the border box
For every browser you have to add a prefix:
-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and Chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /
You are able to play with the individual border-radius properties:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
and set up one value (for the ’rounded’ corner) or two (for the ‘ellipsed’ one).
Here is how it looks : live example>>