Sunday, August 1, 2010

CSS Rounded Corners With No Images

Rounded corners in CSS today is now possible without using images with the border-radius property.


This can be done by the following CSS code in Mozilla Firefox, Opera, Safari, Google Chrome, iCab and Konqueror.


.rounded-corners {

    border-radius: 20px; /* CSS 3 */
    -o-border-radius: 20px; /* Opera */
    -icab-border-radius: 20px; /* iCab */
    -khtml-border-radius: 20px; /* Konqueror */
    -moz-border-radius: 20px; /* Mozilla Firefox */
    -webkit-border-radius: 20px; /* Safari */

}


But this method does not have the same implementaion in different browsers and not all browsers support this property most especially internet explorer. Even IE8 does not support border radius. But this does not mean that it is not possible to have rounded corners in IE.

I tried googling about css rounded corners for internet explorer, and find this HTML REMIX CSS Curved corner (border-radius) cross browser. They had a detailed instruction and demo on how to make rounded corners possible in all browsers including IE6, IE7 and IE8. They also provide updates so I believe you can easily do this on your own. Just follow the easy steps they provide and you can now possibly made a cross browser rounded corners with no images used.

No comments:

Post a Comment