CSS Rounded Corners

CSS Rounded Corners 

The border-radius property allows you to change the shape of the basic box model. 

Every corner of an element can have up to two values, for the vertical and horizontal radius of that corner (for a maximum of 8 values). 

Basically border-radius property is used for rounded corners - 

Syntax - 

Border-radius: value;

Now let us see an example - 

Example -

Output - 

Border-radius is most commonly used to convert box elements into circles. 

By setting the border-radius to half of the length of a square element, a circular element is created.

NOTE - 

Now that was only one value similarly we can give values for all four corners differently as well  -

Example  -

 

• Four values - border-radius: 3px 23px 11px 6px; 
• First value applies to top-left corner, 
• Second value applies to top-right corner, 
• Third value applies to bottom-right corner, and 
• Fourth value applies to bottom-left corner): 

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

• first value applies to top-left corner, 
• second value applies to top-right and bottom-left corners, and 
• third value applies to bottom-right corner

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

 

• first value applies to top-left and bottom-right corners, and 
• second value applies to top-right and bottom-left corners):

Now let us See an example - 

Example - 

Output -