CSS border-end-start-radius property
Description
CSS border-end-start-radius is a logical property that defines the length of both horizontal and vertical radii for the end-start corner a box i.e. coverting sharp corners into round shape corners.
The selection of end-start corner depends upon the writing-mode
The end-start corner is the bottom-left corner for the horizontal-tb writing-mode.
The end-start corner represents top-left or top-right 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-end-start-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-end-start-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-end-start-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-end-start-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-end-start-radius: 30% 50%;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
