June 30, 2009

Rounded Corners Using CSS


Hi All,

Ever wondered if you have an option to create rounded div using css. Not in all browsers but the most popular browser i.e., the mozilla has such an option. To have rounded corner for a div we just need to give it as,

#myDiv
{
border:solid 1px black;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
or you can give all in a single line as
#myDiv
{
border: solid 1px black;
-moz-border-radius: 10px;
}
For Safari broswer, you can use
-webkit-border-radius: 10px;
or you can specify individually as
-webkit-border-top-right-radius: 10px;
-webkit-border-top-leftt-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
For more information, please visit:
http://www.the-art-of-web.com/css/border-radius/

0 comments: