Web developers have wanted to create rectangles with rounded corners for quite some time. In the past, this was accomplished by building the container in
pieces and using images to build the rounded corners. The CSS3 border-radius property allows web developers to easily utilize rounder corners in their
design elements, without having the need for four sets of corner images or the use of multiple div elements. The border-radius property for the past several years
has been used by many web developers because of the widespread browser support.
Browser Support
The border-radius property is supported in Internet Explorer 9+, Firefox 4+, Chrome, Safari 5+, and Opera.
Your browser
may support the border-radius property.
Border-Radius Syntax
The border-radius property is a shorthand property for setting the individual four border-*-*-radius properties. The four border-radius individual properties
are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. When using the shorthand method,
the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right.
If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left. The value of the property can be configured to
a length or percentage. The border-*-radius properties can each accept either one or two values.
border-radius: [ length | % ] [ length | % ] / [ length | % ] [ length | % ]
border-*-*-radius: [ length | % ] [ length | % ]
When two values are provided, they are used to define the the curvature of the corner of the outer border edge. When only one value is supplied,
this is used to define both the horizontal and vertical radii equally.
Examples
Here are some examples that should work across the browsers that support the border-radius property.
<style>
#A {border-bottom-right-radius: 50px;}
#B {border-bottom-right-radius: 50px 25px;}
#C {border-bottom-right-radius: 25px 50px;}
#D {border-radius: 1em 4em 1em 4em;}
#E {border-radius: 25px 10px / 10px 25px;}
#F {border-radius: 50px;}
</style>
Please help us spread the word by socializing it today!
Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.
Recommended Books & Training Resources
