spacer

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


Managed Services Subject Matter Expert (PA)
Next Step Systems
US-PA-Wayne

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
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

Solutions

Whitepapers and eBooks

Whitepaper: Introducing the Azure Services Platform
Whitepaper: Introduction to Microsoft .NET Services for Developers
Whitepaper: Securing Microsoft's Cloud Infrastructure
Internet.com eBook: Becoming a Better Project Manager
Microsoft Partner Portal: What Azure Means for Microsoft Partners
 Internet.com eBook: Web Development Frameworks for Java
Internet.com eBook: Developing a Content Management System Strategy
Article: Ten Things IT Professionals Should Know About Windows 7
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Get Started with .NET Services
 MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni: PDF & PDF/A Engine for .NET and ActiveX Apps
Red Gate Free Trial: SQL Toolbelt
Iron Speed Designer Application Generator
 Download Award-Winning Red Gate SQL Backup Pro
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
Internet.com Hot List: Java EE 6 Platform Highlights the JavaOne Conference
 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
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/5.html