Did you find this useful?
Socialize it today.


CSS3 Border-Radius: Create Rounded Corners

Thursday, November 15, 2012

browser

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.



border-radius

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>


border-radius

Please help us spread the word by socializing it today!

email contact us

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

HTML CSS and JavaScript Sergeys HTML5 CSS3 Responsive Web Design with HTML5 and CSS3