The CSS property border-radiusallows web developers to define how rounded the corners will be. The roundness of each corner is defined using one or two values for the radius that defines its shape depending on whether it is a circle or an ellipse.
The radius is applied to the whole background, even if the element has no borders; the exact position of the cutout is defined by the property background-clip.
This property is a shortcut to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radiusand border-bottom-left-radius.
This property can have from one to eight values. Here are the rules:
Eight values:-
border-radius: 10% 15% 15% 10% / 10% 15% 15% 10%;
As above example:
(This property is a shorthand for the eight properties - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius / border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius).
Four values:-
border-radius: 15px 50px 30px 5px;
(This property is a shorthand for the four properties - border-top-left-radius, border-top-right-radius, border-bottom-right-radiu sand border-bottom-left-radius).
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):
Two values:-
border-radius: 15px 50px;
(top-left-and-bottom-right | top-right-and-bottom-left):
One value:-
border-radius: 15px;
(The radius is defined for all 4 sides, which are rounded equally:
/ * This syntax allows you to specify only one value, together four * /
/ * The rounding is applied to all four corners * /
border-radius: 10px;
/ * top-left-and-bottom-right | top-right-and-bottom-left * /
border-radius: 10px 5%;
/ * top-left | top-right-and-bottom-left | bottom-right * /
border-radius: 2px 4px 2px;
/ * top-left | top-right | bottom-right | bottom-left * /
border-radius: 1px 0 3px 4px; / * Two-radius syntax can also be applied to all four corners * /
/ * (first radius values) / radius * /
border-radius: 10px 5% / 20px;
/ * (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left * /
border-radius: 10px 5% / 20px 30px;
/ * (first radius values) / top-left | top-right-and-bottom-left | bottom-right * /
border-radius: 10px 5px 2em / 20px 25px 30%;
/ * (first radius values) / top-left | top-right | bottom-right | bottom-left * /
border-radius: 10px 5% / 20px 25em 30px 35em;
/ * Global values * /
border-radius: inherit;
border-radius: initial;
border-radius: unset;
Insert this template within a style tag of any block-style element:
{{border-radius | radius1 [radius2 radius3 radius4]}}