Border-Radius - Using Border-Radius Tutorial And Example

December 02, 2010 — In this CSS tutorial we will explore the border-radius property allows for an easy, pure CSS implementation of rounded corners in web design using CSS3 without the need for corner images, Javascript or the use of complex layered DIV tags.

CSS3 border radius Browser Support

Although not supported by older or mobile browsers, most modern browsers support the border-radius property: Internet Explorer 9+, Chrome 5+, Safari 5+, Opera 10.5+ and Firefox 4+. For the pure CSS rounded corners on older versions of Firefox, Chrome and Safari we're going to have to introduce some browser specific properties which we get to later. The CSS3 border-radius property allows for easy implementation of rounded corners as design elements without the need for corner images, Javascript or the use of complex layered DIV tags. From the perspective of a web designer there have been few advancements in CSS that have made development so much easier. 

Pure CSS Rounded Corners Using Broder-radius

Like other CSS properties for margins, padding and borders, border-radius can be created independently using the four individual properties:
border-bottom-left-radius: *px;
border-top-left-radius: *px;
border-bottom-right-radius: *px;
border-top-right-radius: *px;

Or for all four corners using the shorthand method for the border-radius property:
border-radius: *px;
border-radius: *px *px *px *px;

The rounded corners on this box were created using the following border-radius
  1. border: 1px solid #000000;
  2. border-radius: 0px 20px 0px 20px;

Getting Tricky With the CSS

The first set of values define the horizontal radii for each corner: these represent the top-left, top-right, bottom-right and bottom-left radii respectively. Optionally you can add a second set of values by following the first set with a "/". This second set will define the vertical radii for each corner. If only one set is supplied, they will be used to set both the vertical and horizontal radii equally, such as in the example above. As you can see from the example below the corners are not symmetrical, but instead skewed

The rounded corners on this box were created using the following border-radius
  1. border: 1px solid #000000;
  2. border-radius: 60px 60px 60px 60px / 10px 10px 10px 10px;

Moz Border radius & Webkit border radius

Here we introduce -moz-border-radius and -webkit-border-radius. These two properties are browser specific and can be applied for better compatibility with older Safari, Firefox, Chrome and mobile browsers. The individual properties can be written and work the same as the CSS3 border-radius. The following is an example of how all three properties work together for better browser support.

The rounded corners on this box were created using the following border-radius

  1. border: 1px solid #000000;
  2. border-radius: 20px;
  3. -webkit-border-radius: 20px;
  4. -moz-border-radius: 15px;

Have A Question about Border Radius?

If you have a question about rounded corners and the use of border-radius leave us a comment and we will see if we can answer it for you. As a web design company in Shenzhen, China, we are always looking to support and engage the developer community, so we will be happy to answer answer any questions you might have.

Add a Comment

Comments

Posted Subject Comment
AgotokGon
September 11, 2011
我同意 非常感谢。
biokzominee
July 21, 2011
very informative very interesting, thanks