spacer

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


Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?
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, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT
 Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips
SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports
 IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
Video: Deploy Applications on Windows Azure
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Download: Microsoft Visual Studio 2010 Beta 2
Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Get the Windows 7 SDK
 Free Trial: Red Gate SQL Backup Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
All About Botnets
 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

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

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