Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 18

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 19

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 20

Warning: Cannot modify header information - headers already sent by (output started at /home/dealkhus/cosmoread.com/wp-includes/formatting.php:5100) in /home/dealkhus/cosmoread.com/wp-content/themes/cosmoread/header.php on line 21
Home » Education » CSS Rounded Corners Using Div for Firefox

CSS Rounded Corners Using Div for Firefox

Here you go for Rounded corner for FireFox Browser.

If you want to round corners without using images, that is unfortunately not possible with either CSS1, CSS2 or CSS2.1.

The CSS3 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.

 For More Information Mozilla CSS Extensions

Check Also

Trouble in Paradise: How Biotech is Fighting Tropical Diseases

Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes …