Loading Please Wait...
CSS border-radius property is used to make round corner of the border outer edge. This will also helps us to create different shapes like circle, ellipse, pills, etc.
CSS border-radius property is applied to the entire background, not only to the border. It means it will round the corner even id there is no border. The position of the roundness (clipping) is defined by the background-clip property
The border-radius property can have following values:
Length values: px, cm, in, rem, em, etc.
Percentage values: 5%, 10%, 50%, etc.
Global values: inherit, initial, revert, revert-layer, and unset.
border-radius: 5px;
| Radius | Physical Property | Logical Property |
|---|---|---|
|
top-left | start-start |
|
top-right | start-end |
|
bottom-left | end-start |
|
bottom-right | end-end |
|
top-left and bottom-right | start-start and end-end |
|
top-right and bottom-left | start-end and end-start |
|
radius | radius |
Sets border radius for all sides
border-radius: 10px;
First value sets radius of top-bottom and second value sets radius of left-right
border-radius: 10px 5%;
First value sets radius of top, second value sets radius of left-right and third value sets radius of bottom
border-radius: 10px 5% 5em;
First value sets radius of top, second value sets radius of right, third value sets radius of bottom, and forth value sets radius of left.
border-radius: 10px 5% 5em 50%;
/* all 4 sides */
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;
/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;
CSS provide border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius property to set border style of individual sides.
/* top-left border */
border-top-left-radius: 5px; /* physical property */
border-start-start-radius: 5px; /* logical property */
/* top-right border */
border-top-right-radius: 5px; /* physical property */
border-start-end-radius: 5px; /* logical property */
/* bottom-left border */
border-bottom-left-radius: 5px; /* physical property */
border-end-start-radius: 5px; /* logical property */
/* bottom-right border */
border-bottom-right-radius: 5px; /* physical property */
border-end-end-radius: 5px; /* logical property */
When we define radius, it is rounded to a circle. We can also define elliptical radius with optional value with a slash (/).
We can define one, two, three, or four values on either side of the slash (/).
Values before slash (/) define horizontal radius and values after slash (/) define vertical radius
Horizontal radius means left and right radius when defining top-left, top-right, bottom-left, bottom-right, etc.
Vertical radius means top and bottom radius when defining top-left, top-right, bottom-left, bottom-right, etc.
/* (first radius values) / radius */
border-radius: 10px / 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;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved