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

Solutions

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
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 Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
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

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

Virtual Lab: Migrating PHP Applications
Enabling Web Slices and Accelerators with a PHP Site
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 >
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