A quick and easy solution for adding rounded corners to your boxes, without the use of images. Here’s a useful link on HTML5 + CSS3 and the compatibility of the browser that support it.
[php toolbar=”false”]-moz-border-radius: 10px; /* Gecko */
-webkit-border-radius: 10px; /* Webkit*/
border-radius: 10px; /* CSS3 */
[/php]
So what about IE8 or lower
Border-radius wasn’t added until IE9, where CSS3 was introduced in to this version. The alternative to add rounded corners would be to uses jquery plugins called “JQuery Corners“.
For the demo below, try and use different browsers to understand the different outcomes with the use of CSS3 and the jquery plugin.
Conclude
The best practise is to use both CSS3 as well as the jquery plugin, CSS3 will be covered by upcoming browsers and future new versions. The jquery plugin will help on older versions of browsers and earlier version of IE, which 25% of the browser market share still use IE8 !!!
References
http://www.css3.info/preview/rounded-border/
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0
http://jquery.malsup.com/corner/
