Border-radius property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On February-04-2021 12:09:20

Border-radius Shorthand Property



With border-radius property is used to rounds the corner of elements outer edge border. Using border-radius any element can be convert into circular, elliptical, or other shapes which have round edges. To make circular corner give single radius or give two radii to make elliptical corner.
If border property is not applied than also border-radius work for background property
The border-radius Its syntax is: border-radius: <length> <percentage> value;
Values description:

  • <length>
    Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

  • <percentage>
    Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.


The border-radius is shorthand for:

  • border-top-left-radius

  • border-top-right-radius

  • border-bottom-right-radius

  • border-bottom-left-radius


Let see a syntax for all values of border-radius-color property.
Example:
“Global value”
border-radius: intital;
border-radius: inherit;
border-radius: unset;

“Circular corner”
border-radius: 5px; //applied to all border corner
border-radius: 5px 10px; // top-left and bottom-right | top-right and bottom-left
border-radius: 5px 10px 3px; // top-left | top-right and bottom-left | bottom-right
border-radius: 5px 10px 3px 12px; // top-left | top-right | bottom-right | bottom-left
“Elliptical Corner”
//here first is apply similar way as circular radius for one, two, three and four value
border-radius: 10px / 5px; // (first value) / applied to all border corner or horizontal | vertical
border-radius: 10px 2em / 5px 10px; // (first value) / top-left and bottom-right | top-right and bottom-left
border-radius: 10px 2em 5% / 5px 10px 3px; // (first value) / top-left | top-right and bottom-left | bottom-right
border-radius: 10px 2em 5% 2% / 5px 10px 3px 12px; // (first value) / top-left | top-right | bottom-right | bottom-left

Code Example:




We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Comments

Share your thoughts about this post
web counter