If you are still rounding edges with photoshop for images, STOP! CSS3 now gives you the ability to easily round edges automatically for images, shaving off countless hours of tedious imaged editing work. This will not work for people using REALLY OLD browser (sorry Grandma), but it should work on 95% of browser’s in use today.
The CSS border-radius property is a shorthand property for setting multiple “border radius” related properties in one place. In other words, the border-radius property is an efficient way of adding rounded corners to your borders.
The border-radius property sets the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties.
Note that the border-radius property needs to be used in conjunction with the border property (or another border-related property) in order to set the actual border.
Note that order is important. You must specify the values in the same order as listed in the Possible Values section below.
Here is an example of how you might use this in your css file (note that there are some webkit additions to be compatible with some older browser versions):
-webkit-border-radius: 7.5em 5em; /* Safari & Chrome */
-moz-border-radius: 7.5em 5em; /* Firefox */
-ms-border-radius: 7.5em 5em; /* Internet Explorer */
-o-border-radius: 7.5em 5em; /* Opera */
border-radius: 7.5em 5em; /* W3C */
Now, if you are like me and would like to be able to quickly generate code (especially with odd-shaped cornering), here is a really cool resource to generate your border radius: http://css3gen.com/border-radius/
Until next time, happy coding.