CSS border-start-end-radius property
Description
CSS border-start-end-radius is a logical property that defines the length of both horizontal and vertical radii for the start-end corner a box i.e. coverting sharp corners into round shape corners.
The selection of start-end corner depends upon the writing-mode
The start-end corner is top-right corner for the horizontal-tb writing-mode.
The start-end corner represents bottom-right or bottom-left corner for the vertical-rl or vertical-lr writing-mode respectively.
Change the direction of flow of text.
horizontal-tb vertical-lr vertical-rl
Syntax
border-start-end-radius : +ve length | X-length Y-length
Property values
+ve length (in px)Default
-
It means the length of both horizontal and vertical radii is 0.
border-start-end-radius: 0px;
+ve length (in percentage)
-
The length of the horizontal radius is 30% of the width of the border box. Similarly, the length of vertical radius is 30% of the height of the border box.
border-start-end-radius: 30%;
X-radius Y-radius (in px)
-
These two values represent horizontal and vertical radii. The length of horizontal and vertical radii is 40px and 20px respectively.
border-start-end-radius: 40px 20px;
X-radius Y-radius (in percentage)
-
The length of the horizontal radius is 30% of the width of the border box. Similarly, the length of vertical radius is 50% of the height of the border box.
border-start-end-radius: 30% 50%;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
