CSS rounded corners without using images

Before introducing CSS3 it wasn't possible to make rounded corner without using images. The Border module offers a way out, though, through the border-radius properties.

The syntax is as follows:

border-radius: <length> <length>

The two lengths are, for left-to-right and right-to-left scripts, respectively horizontal radius, and vertical radius.

For top-to-bottom scripts, and bottom-to-top scripts, the values are respectively vertical radius, then horizontal radius.

If the second length is omitted, it should be interpreted as being equal to the first property, thus making the corner a quarter circle.

If the second length is set to zero, the resulting corner will be square.

Individual corners

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

* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
* border-top-left-radius

Browser compatibility

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
Practical use of border-radius

If you absolutely want to make use of the border-radius properties now, and want to maintain forward compatibility, Yous should use both the Gecko specific property, and the CSS3 property. Further, you must restrict yourself to only creating perfectly circular corners, using only one length value:

blockquote {
-moz-border-radius: 2em;
border-radius: 2em;
}

This is because the Mozilla implementation of border-radius is severely out of line with the CSS3 working draft. Mozilla accepts up to four length values for the border-radius property, and interprets them as -moz-border-top-left-radius, -moz-border-top-right-radius, -moz-border-bottom-right-radius and -moz-border-bottom-left-radius with one value for each.

border-radius example given below:

One length value

If the second length value is omitted, it is interpreted as being equal to the first, meaning that border-radius: 5px 5px is equal to border-radius: 5px;. Example:

#example1 {
-moz-border-radius: 1em;
border-radius: 1em;
}

Different length values

When the length values are different, the first length value will be interpreted as horizontal length, and the second one as vertical length, for left to right scripts. Example:

#example2 {
-moz-border-radius: 2em 1em;
border-radius: 2em 1em;
}

Related Posts :