spacer

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


Product Designer
Aquent
US-WA-Redmond

Justtechjobs.com Post A Job | Post A Resume
Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management

Logo

Fun with Mozilla Border Radii
Interactive Tool



Below, we have three nested <div> elements, two bordered, one not.

Follow the instructions to change the curvature of the corner elements..


10px black border
no border - red background
10px green border

1. Choose the border corner curve radius you want to modify.

    CSS3 property: 
CSS3 JS property: 
 
Mozilla property: 
Mozilla JS property: 

2. Enter the curve radius value in CSS length units, percentage or "inherit" value:

Possible ValuesAffects...Example
<length> 40px
inherit inherit
Possible ValuesAffects...Example
<length> all corners 40px
<length> <length> [top-left bottom-right] [top-right bottom-left] 20pt 30px
<length> <length> <length> [top-left] [top-right bottom-left] [bottom-right] 80px 60px 30px
<length> <length> <length> <length> [top-left] [top-right] [bottom-left] [bottom-right] 80px 60pt 1em 10px
inherit all corners inherit

Enter curve radius value:  

3. Choose which bordered element to apply values to:

     

4. View the full syntax of the chosen option:

CSS3 Syntax: 
CSS3 JS Syntax: 
 
Mozilla CSS Syntax: 
Mozilla JS Syntax: 

5. Repeat steps 1 to 4 or go to Step 6:

6. Reset ( clear ) border radius values:

     


On the next page, we wrap up.



Send a comment or suggestion to Peter Belesis

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

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

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

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