CSS Rounded Corners in 2011

Very fortunately, albeit lately, rounded corners attributes have been added to CSS.  CSS3 contains the attribute border-radius (e.g. border-radius: 15px;) which makes doing rounded corners on divs a breeze.

Unfortunately, this is not backwards compatible with many browsers created before this addition, including all Internet Explorers before IE 9.

To put rounded corners on an element that works on all browsers, past and present, create a class as below.

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
behavior: url(/css/border-radius.htc);

You need to download the above .htc file from curve-corner at google code.

You can change the radius above as you wish.  There are some obscure situations in IE where above doesn’t work.  Ways to handle this are at the link here.

This entry was posted in Technical and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s