Until the advent of CSS3, if webmasters wanted to create a rounded border, they would need to create it using an image of a rounded border. (Here’s for an example of the old way of creating a rounded border.)
Now, you no longer need to “fake” your rounded corners — no longer do you need to have boxy entries surrounded by pictures of rounded edges. The new CSS3 property
border-radius lets you create the elusive rounded corner!
Because CSS3 is not yet a full standard, you will need to use the vendor browser prefixes.
The CSS properties you’ll need to use are
-webkit-border-radius, -moz-border-radius, and border-radius
For example, to produce content in a grey H2 with 10 pixels of padding that has 25-pixel rounded corners:
<h2 style=”-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: #ccc; padding: 10px;”>This H2 has rounded corners!</h2>
This H2 has rounded corners!
Note: As of this writing, border-radius does NOT work in Internet Explorer version 8 or earlier.
For details, visit http://caniuse.com/#search=border-radius