CSS3 and Mozilla Border Radius Properties- DHTML Lab

CSS3

Even though browser support for the 1998 CSS2 Specification is still incomplete (especially in IE), and the more recent CSS2.1 Specification is not yet ratified, the W3C has been steadily moving ahead with drafts for a proposed CSS3 Specification.

It's still early, but to facilitate discussion and implementation, the new CSS specification has been modularized. One such module is the CSS3 Border Module, which is still a "Working Draft."

The CSS3 Border Module

The Border Module incorporates CSS1 and CSS2 border properties, some of which have additional value options, and introduces many new ones.

The table below lists the proposed properties. They may or may not appear in a final CSS3 specification. If they do, they may have different behaviors from the currently proposed one. They are listed for information purposes, only.

Vendor-Specific CSS Extensions

All CSS specifications allow for browser-specific extensions to the defined standards.

Browser-specific properties should be easily identifiable, both by browser-engines and by authors attempting to implement them. They should begin with a dash ( - ) or underscore ( _ ), followed by a vendor identifier, followed by a dash ( - ) and the property name.

The full definition can be found in the W3C documentation.

Browser Radii

In the following pages, we will outline the proposed border-radius family of properties and the current vendor-specific implementation in Mozilla, Netscape and other Gecko browsers.

We've included an interactive tool so you can experiment with the properties, but the tool is only useful if you implement it in a Gecko browser.

Browser Support

The -moz-border-radius properties are supported in Netscape, Mozilla and other Gecko browsers in the versions listed below

	7.0 +
	0.9.5 +

Let's start by looking at the proposed CSS3 version of the properties.