spacer

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


Sr. Programmer/Analyst
Professional Technical Resources
US-OR-Portland

Justtechjobs.com Post A Job | Post A Resume
Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next

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



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

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

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