The CSS 3 ‘Border Radius’ Rule

Posted on December 4, 2010

This is my third post on the ‘CSS 3 Rules’ series and it is once again on how to style borders using CSS 3. This rule is also know as ’rounded corners’ because it allows us to specify a radius value for the border’s corners.
By now it is one of the most used CSS 3 rules since it is interpreted by all decent browsers. It works perfectly using Mozilla Firefox, Google Chrome, Safari and Opera.

Compatibility Table

4	5	3	3.6	10	10.5	4	7	8	9

Usage

Here is how to do it when we need all the corners to have the same value for the radius:

1
2
3
4
5
6

div {
  border: 1px solid #ccc;
  border-radius: 10px; /* for all recent (and decent) browsers */
  -moz-border-radius: 10px; /* for older versions of Mozilla browsers */
  -webkit-border-radius: 10px; /* for older versions of Safari browsers */
}

Example

This is how the code above looks like:

But one great thing about this rule is that it is possible to define a different radius for any of the four corners. This means that you can have a rectangle (or a square) with 4 different corners. Here goes an example:

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div {
  border: 3px solid #ccc;
  border-top-left-radius: 60px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-topleft: 60px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-top-left-radius: 60px;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 0px;
}

Example

This is how the code above looks like:

But this is not all you can do with the CSS3 Border Radius rule. You can also specify different values in a single corner. This means that you can have 8 different angles – 2 for every corner.

You do it like this for all the corners:

1
2
3
4
5

div {
  border-radius: [horizontal value] [vertical value];
  -moz-border-radius: [horizontal value] [vertical value];
  -webkit-border-radius: [horizontal value] [vertical value];
}

Or, like this for a specific corner:

1
2
3
4
5

div {
  border-top-left-radius: [horizontal value] [vertical value];
  -moz-border-radius-topleft: [horizontal value] [vertical value];
  -webkit-border-top-left-radius: [horizontal value] [vertical value];
}

Usage

This is how it looks for all the corners:

1
2
3
4
5
6

div {
  border: 2px solid #ccc;
  border-radius: 80px 40px;
  -moz-border-radius: 80px 40px;
  -webkit-border-radius: 80px 40px;
}

Example

This is how the code above looks like:

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

1. The CSS 3 ‘Border Colors’ Rule
2. The CSS 3 ‘Border Image’ Rule
3. The CSS 3 ‘Border Radius’ Rule

This entry was posted in CSS and tagged css3, web design. Bookmark the permalink.