codescracker


css

CSS Border Radius



« Previous Tutorial Next Tutorial »


The border-radius

The border-radius property is used to give round corners to a box like shape.

To use the border-radius property, you need to specify the position of the corner of a box that is required to be in a round shape.

CSS Border Radius Properties

You can use any of the following properties (describes in the table given below) to create round corners:

Property Description
border-top-left-radius Specifies the shape of the border of the top-left corner
border-top-right-radius Specifies the shape of the border of the top-right corner
border-bottom-left-radius Specifies the shape of the border of the bottom-left corner
border-bottom-right-radius Specifies the shape of the border of the bottom-right corner
border-radius Specifies a shorthand property for setting all the border radius related properties

CSS border-top-left-radius

The border-top-left-radius specifies a round corner in the top left direction of a border.

The syntax to use the border-top-left-radius property is given below:

border-top-left-radius: value;

CSS border-top-right-radius

The border-top-right-radius specifies a round corner in the top right direction of a border.

The syntax to use the border-top-right-radius property is as follows:

border-top-right-radius: value;

CSS border-bottom-left-radius

The border-bottom-left-radius specifies a round corner in the bottom left direction of a border.

The syntax to use the border-bottom-left-radius property is given here:

border-bottom-left-radius: value;

CSS border-bottom-right-radius

The border-bottom-right-radius specifies a round corner in the bottom right direction of a border.

The syntax to use the border-bottom-right-radius property is given below:

border-bottom-right-radius: value;

Note - If you provide the value as zero, the corner will be square and not round.

CSS border-radius Shorthand

You can also use the border-radius shorthand property for all the four corners simultaneously.

The syntax to use the border-radius shorthand property is as follows:

[ <length> | <percentage> ] {1,4} [ / [ <length> | <percentage> ] {1,4} ]?

In the above syntax, the first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a forward slash (/), defines the vertical radii for all the four corners.

CSS border-radius Shorthand Example

Some examples to use the border-radius shorthand property are given as follows:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test