.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
CSS3 - Creating Rounded Corners
The CSS3 border-radius property allows developers to easily create rounder corners for their website designs.
padding: 10px;
color:#CCC;
background-color:#60C;
/**********************
Rounded Corners
***********************/
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px;
Syntax
border-*-*-radius: [ <horizontal length> | <%> ] [ <vertical length> | <%> ]
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
Border-*-radius properties with 1 Value
The value is expressed as a length or a percentage of the corresponding dimensions of the border box.
This is an example of border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px; /* Firefox */
-webkit-border-top-left-radius: 10px; /* Safari and Chrome */
Notice that the top left corner is rounded.
Border-*-radius properties with 2 Values
This is an example of border-top-left-radius: 100px 50px;
-moz-border-top-left-radius: 100px 50px; /* Firefox */
-webkit-border-top-left-radius: 100px 50px; /* Safari and Chrome */
Notice that the top left corner is rounded.
Notice that the curve starts in the top left corner and goes across 100px and then down 50px.
Border-*-radius properties with 2 Values
This is an example of border-top-left-radius: 50% 50%;
-moz-border-top-left-radius: 50% 50%; /* Firefox */
-webkit-border-top-left-radius: 50% 50%; /* Safari and Chrome */
Notice that the top left corner is rounded.
Go horizonally from the top left corner 50% to see where the curve starts.
Go vertically from the top left corner 50% to see where the curve ends.
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
Border-radius Shorthand Property
Syntax
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]
- top-left
- top-right
- bottom-right
- bottom-left
background-color: #CCC;
padding: 5px;
Browser Support
- Internet Explorer 9+
- Opera 10.5+
- Safari 5+
- Chrome 5+
- Safari and Chrome version 3+ required the -webkit- prefix
- Mozilla Firefox 1.0+ supports border-radius with the -moz- prefix
Page last updated: May 31, 2012 10:26 AM
Content and Navigation...