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. |