CSS: border-radius property

This CSS tutorial explains how to use the CSS property called border-radius with syntax and examples.

Description

The CSS border-radius property defines rounded corners on the border of a box.

Syntax

The CSS border-radius property can be expressed with one, two, three or four values provided, followed by an optional slash (/) and second set of values.

Syntax - One Value

The syntax for the CSS border-radius property (with 1 value) is:

border-radius: all [ / all];

When one single value is provided, the border-radius value will apply to all four corners of the box (ie: top-left, top-right, bottom-right, bottom-left).

If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

Syntax - Two Values

The syntax for the CSS border-radius property (with 2 values) is:

border-radius: top-left&bottom-right    top-right&bottom-left  
           [ / top-left&bottom-right    top-right&bottom-left];

When two values are provided, the first value will apply to the top-left and bottom-right corners of the box. The second value will apply to the top-right and bottom-left corners of the box.

If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

Syntax - Three Values

The syntax for the CSS border-radius property (with 3 values) is:

border-radius: top-left    top-right&bottom-left    bottom-right
           [ / top-left    top-right&bottom-left    bottom-right];

When three values are provided, the first value will apply to the top-left corner of the box. The second value will apply to the top-right and bottom-left corners of the box. The third value will apply to the bottom-right corner of the box.

If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

Syntax - Four Values

The syntax for the CSS border-radius property (with 4 values) is:

border-radius: top-left    top-right    bottom-right    bottom-left
           [ / top-left    top-right    bottom-right    bottom-left];

When four values are provided, the first value will apply to the top-left corner of the box. The second value will apply to the top-right corner of the box. The third value will apply to the bottom-right corner of the box. The fourth value will apply to the bottom-left corner of the box.

If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

The top-left, top-right, bottom-right, and bottom-left values can be one of the following:

Note

• In the CSS border-radius property, you can combine different border-radius values for top-left, top-right, bottom-right, and bottom-left corners of the box.
• If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

Browser Compatibility

The CSS border-radius property has basic support with the following browsers:

• Chrome 4
• Firefox 4+ (Gecko 2+)
• Internet Explorer 9+ (IE 9+)
• Opera 10.5+
• Safari 5+ (WebKit 3+)

Example

We will discuss the border-radius property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values.

One Value in Set

Let's look at a CSS border-radius example where we provide one value in a set.

div { border-radius: 2px; }

In this CSS border-radius example, we have provided one value of 2px which would apply to all 4 corners of the box, both horizontal and vertical radius.

Next, we'll look at a CSS border-radius example where we provide one value set for the horizontal radius and one value set for the vertical radius.

div { border-radius: 2px / 3px; }

In this CSS border-radius example, we have provided a value of 2px which would apply to the horizontal radius for all 4 corners of the box. The value of 3px would apply to the vertical radius for all 4 corners of the box.

Two Values in Set

Let's look at a CSS border-radius example where we provide two values in a set.

div { border-radius: 2px 3px; }

In this CSS border-radius example, we have provided the value of 2px which would apply to the top-left and bottom-right corners of the box, both horizontal and vertical radius. The second value of 3px would apply to the top-right and bottom-left corners of the box, both horizontal and vertical radius.

Next, we'll look at a CSS border-radius example where we provide two values in a set for the horizontal radius and two values in a set for the vertical radius.

div { border-radius: 2px 3px / 5px 4px; }

In this CSS border-radius example, we have provided the value of 2px which would apply to the top-left and bottom-right corners of the box for the horizontal radius. The second value of 3px would apply to the top-right and bottom-left corners of the box for the horizontal radius. The third value of 5px would apply to the top-left and bottom-right corners of the box for the vertical radius. The fourth value of 4px would apply to the top-right and bottom-left corners of the box for the vertical radius.

Three Values in Set

Let's look at a CSS border-radius example where we provide three values in a set.

div { border-radius: 1px 2px 3px };

In this CSS border-radius example, we have provided the value of 1px which would apply to the top-left corner of the box, both horizontal and vertical radius. The second value of 2px would apply to the top-right and bottom-left corners of the box, both horizontal and vertical radius. The third value of 3px would apply to the bottom-right corner of the box, both horizontal and vertical radius.

Next, we'll look at a CSS border-radius example where we provide three values in a set for the horizontal radius and three values in a set for the vertical radius.

div { border-radius: 1px 2px 3px / 6px 5px 4px; }

In this CSS border-radius example, we have provided the value of 1px which would apply to the top-left corner of the box for the horizontal radius. The second value of 2px would apply to the top-right and bottom-left corners of the box for the horizontal radius. The third value of 3px would apply to the bottom-right corner of the box for the horizontal radius.

The fourth value of 6px would apply to the top-left corner of the box for the vertical radius. The fifth value of 5px would apply to the top-right and bottom-left corners of the box for the vertical radius. The sixth value of 4px would apply to the bottom-right corner of the box for the vertical radius.

Four Values in Set

Let's look at a CSS border-radius example where we provide four values in a set.

div { border-radius: 1px 2px 3px 4px; }

In this CSS border-radius example, we have provided the value of 1px which would apply to the top-left corner of the box, both horizontal and vertical radius. The second value of 2px would apply to the top-right corner of the box, both horizontal and vertical radius. The third value of 3px would apply to the bottom-right corner of the box, both horizontal and vertical radius. The fourth value of 4px would apply to the bottom-left corner of the box, both horizontal and vertical radius.

Next, we'll look at a CSS border-radius example where we provide one value for the horizontal radius and one value for the vertical radius.

div { border-radius: 1px 2px 3px 4px / 8px 7px 6px 5px; }

In this CSS border-radius example, we have provided the value of 1px which would apply to the top-left corner of the box for the horizontal radius. The second value of 2px would apply to the top-right corner of the box for the horizontal radius. The third value of 3px would apply to the bottom-right corner of the box for the horizontal radius. The fourth value of 4px would apply to the bottom-left corner of the box for the horizontal radius.

The fifth value of 8px would apply to the top-left corner of the box for the vertical radius. The sixth value of 7px would apply to the top-right corner of the box for the vertical radius. The seventh value of 6px would apply to the bottom-right corner of the box for the vertical radius. The eighth value of 5px would apply to the bottom-left corner of the box for the vertical radius.