spacer

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


Service Release Technical Architect Sr (PA)
Next Step Systems
US-PA-Philadelphia

Justtechjobs.com Post A Job | Post A Resume
Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans


Logo

Fun with Mozilla Border Radii
The CSS3 Proposal



The border-radius property enables the creation of rounded element corners, regardless of whether borders have been specified.

The "radius" refers to the radius of the quarter-ellipse that forms the element corner, as illustrated in the image on the left, borrowed from the W3C documentation.

The table below illustrates the various property-value combinations possible under the present proposal. We've also included our interpretation of what the JavaScript syntax would look like if the proposal is adopted.


border-radius:<length value>;
border-radius:<length value> <length value>;
The border-radius property affects all four border corners of an element.
It accepts either one or two values.
If a single value is specified, the horizontal radius and the vertical radius are identical.
If two values are specified, the first value defines the horizontal radius and the second the vertical one.
CSS3: border-radius:55px;
JS: element.style.borderRadius="55px";
CSS3: border-radius:55px 29px;
JS: element.style.borderRadius="55px 29px";

border-top-left-radius:<length value>;
border-top-left-radius:<length value> <length value>;
The border-top-left-radius property affects the top-left border corner of an element.
Like border-radius, it accepts either one or two values.
CSS3: border-top-left-radius:55px;
JS: element.style.borderTopLeftRadius="55px";
CSS3: border-top-left-radius:55px 29px;
JS: element.style.borderTopLeftRadius="55px 29px";

border-top-right-radius:<length value>;
border-top-right-radius:<length value> <length value>;
The border-top-right-radius property affects the top-right border corner of an element.
Like border-radius, it accepts either one or two values.
CSS3: border-top-right-radius:55px;
JS: element.style.borderTopRightRadius="55px";
CSS3: border-top-right-radius:55px 29px;
JS: element.style.borderTopRightRadius="55px 29px";

border-bottom-right-radius:<length value>;
border-bottom-right-radius:<length value> <length value>;
The border-bottom-right-radius property affects the bottom-right border corner of an element.
Like border-radius, it accepts either one or two values.
CSS3: border-bottom-right-radius:55px;
JS: element.style.borderBottomRightRadius="55px";
CSS3: border-bottom-right-radius:55px 29px;
JS: element.style.borderBottomRightRadius="55px 29px";

border-bottom-left-radius:<length value>;
border-bottom-left-radius:<length value> <length value>;
The border-bottom-left-radius property affects the bottom-left border corner of an element.
Like border-radius, it accepts either one or two values.
CSS3: border-bottom-left-radius:55px;
JS: element.style.borderBottomLeftRadius="55px";
CSS3: border-bottom-left-radius:55px 29px;
JS: element.style.borderBottomLeftRadius="55px 29px";

The Mozilla people have jumped the gun and introduced their own proprietary implementation, albeit for internal use.



Send a comment or suggestion to Peter Belesis


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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