spacer

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


Sr Instructional Designer D2L-Moodle,Clearance
WSI Nationwide, Inc.
US-NJ-Fort Monmouth

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


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.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 >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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