spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com


Software Developer / Programmer - Need 2 people
Next Step Systems
US-IL-Des Plaines

Justtechjobs.com Post A Job | Post A Resume
Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies


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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji

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

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