border radius

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 border-radius Property

Example

Add rounded borders to a <div> element:

div {
    border: 2px solid;
    border-radius: 25px;

}

Definition and Usage

The border-radius property is used to add rounded corners to an element.

The border-radius property is a shorthand property for setting the four border-*-radius properties.

If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the rules:

  • Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
  • Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
  • Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
  • One value: all four corners are rounded equally

1. Four values - border-radius: 15px 50px 30px 5px:

2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:

 

 

 

CSS Syntax

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Note: The four values for each radius 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.

Property Values

Value Description  
length Defines the shape of the corners. Default value is 0  
% Defines the shape of the corners in %