CSS

CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise

CSS3

CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS border radius Property

CSS border-radius Property

 

 

The border-radius property is used to define the radius of the element corners. It allows us to add rounded corners to our borders in an element.

 

For your Information:-

 

When four values are given in border-radius like (15px 50px 30px 5px) than 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.
When three values are given in border-radius like (15px 50px 30px) than 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.
When two values are given in border-radius like (15px 50px) then the first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners.
When one value is given in border-radius like (15px) then the value applies to all four corners, which are rounded equally.

 

Default Value:-

 

Its default value is 0.

 

Syntax:-

 

Its default syntax is:- border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;

 

Further Explanation:-

 

Value Description
length Specifies the shape of the corners.
% Specifies the shape of the corners in %.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Code Explanation

All Tutorials related to CSS Properties

All Sections related to CSS