CSS3 and Mozilla Border Radius Properties- DHTML Lab | WebReference

CSS3 and Mozilla Border Radius Properties- DHTML Lab


Logo

Fun with Mozilla Border Radii
Introduction

By Peter Belesis

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.

border
border-top
border-right
border-bottom
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-image
border-top-image
border-right-image
border-bottom-color
border-left-image
border-corner-image
border-top-left-image
border-top-right-image
border-bottom-right-color
border-bottom-left-image
border-image-transform
border-fit border-fit-length
border-top-fit-length
border-right-fit-length
border-bottom-fit-length
border-left-fit-length
border-fit-width
border-top-fit-width
border-right-fit-width
border-bottom-fit-width
border-left-fit-width
border-corner-fit border-top-left-fit-length
border-top-right-fit-length
border-bottom-right-fit-length
border-bottom-left-fit-length
border-top-left-fit-width
border-top-right-fit-width
border-bottom-right-fit-width
border-bottom-left-fit-width
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-break
box-shadow

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

netscape 7.0 +
mozilla 0.9.5 +



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



Send a comment or suggestion to Peter Belesis

Created: September 27, 2004
Revised: September 27, 2004

URL: http://webreference.com/dhtml/column70/