Wednesday, July 15, 2009

CSS : Rounded Corners without Image 1

The border-radius may be specified individually for each corner, through the use of:

º border-top-left-radius
º border-top-right-radius
º border-bottom-left-radius
º border-bottom-right-radius

At the time of writing, the border-radius properties are not supported in any browser, since the CSS3 border module is still in “Working Draft” status.

However, browsers based on the Gecko rendering engine (Firefox, Mozilla) has experimental support for the border-radius property, and use the vendor-specific -moz- prefix for the properties, making it -moz-border-radius.

#roundrect1{
-moz-border-radius: 2em;
border-radius: 2em;
background: black;
color: white;
padding: 15px;
width: 200px;
}
#roundrect2{
-moz-border-radius: 1em;
border-radius: 1em;
border: 0.3em solid black;
padding: 1.5em;
width:200px;
}
#roundrect3{
-moz-border-radius:0 2em 0 2em;
border: 0.3em solid black;
padding: 1.5em;
width:200px;
}
#roundrect4{
-moz-border-radius:2em 0 2em 0;
background: black;
color: white;
padding: 15px;
width:200px;
}

Taken From : http://virtuelvis.com/archives/2004/11/imageless-rounded-corners

No comments:

Post a Comment