Cross browser supported rounded corner borders with CSS

Thursday, July 28, 2011

Having rounded corner for borders is really cool feature that was missing in HTML for long. In order to overcome this issue web developers used to use images as borders. It was too much of messy code and performance hit. Now CSS3 is supporting rounded corners. It is not yet fully supported by popular browsers as a standard.

But using standard CSS3 and browser specific attributes, you can add rounded borders quite safely. As usual IE was the bad guy that was not supporting rounded corner CS3 style attributes until recently. Ultimately IE 9 also supporting rounded corners.  You may wonder if your web page is viewed by older browser, what will be the result. Not a big issue, it will be displayed as normal square boundaries.

So I would suggest not to overuse exagerated rounded corners right now, rather design your web pages using gentle rounded corners so that those old people using old browsers are not too much peanalised. :-)


There are enough resources to learn using rounded corner borders. I will be just sharing simple and straightforward example that work in all the latest browsers. (I have tested this with FF 5, Chrome 12, Safari 5 and IE 9.)

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<style>
#wrapper {
    background: #eaeaea;
    border-radius: 10px 10px 10px 10px;
}
</style>

<div id="wrapper">
Some Text <br />
Some Text <br />
Some Text <br />
Some Text <br />
</div>
</body>
</html>

More details available in following links;
http://davidwalsh.name/css-rounded-corners
http://www.css3.info/preview/rounded-border/

Related Posts Plugin for WordPress, Blogger...

0 comments:

 
 
 

DZone

Business Insider (Tech)

TechCrunch

Mashable

Computer World

eWeek - RSS Feed