Webzstore
The CSS 'border-end-start-radius' property defines the radius of the curve at the corner where the block-end edge meets the inline-start edge of an element. This logical property allows for the rounding of that specific corner according to the content's writing mode and direction, making it essential for designs that need to be flexible across languages and writing directions.
CSS 'border-end-start-radius' Property Examples
See the Pen CSS 'border-end-start-radius' Property by Webzstore (@webzstore) on CodePen.
The 'border-end-start-radius' property is a valuable tool in CSS for creating designs that need to adapt to various languages and writing systems. It offers the flexibility to tailor rounded corners to the directionality of the content.
Browser Support For 'border-end-start-radius' Property
 |  |  |  |  |
| 66.0 | 15.0 | 89.0 | 89.0 | 75.0 |
CSS Syntax of the 'border-end-start-radius' Property
border-end-start-radius: <length-percentage>{1,2};
border-end-start-radius: 10px; /* circular corner */
border-end-start-radius: 20px 10px; /* elliptical: 20px horizontal radius, 10px vertical radius */
- One value sets a circular corner radius.
- Two values set the horizontal radius first and the vertical radius second, giving an elliptical corner.
Usage of the 'border-end-start-radius' Property
Use 'border-end-start-radius' to apply a rounded corner at the junction of the block-end edge and the inline-start edge. In writing-mode: horizontal-tb with direction: ltr (the default for English) that is the bottom-left corner, so it maps to border-bottom-left-radius; with direction: rtl the inline-start edge is on the right, so it maps to border-bottom-right-radius. This is particularly useful in internationalized web applications where the direction of text flow can change, as it ensures that the corner radius adapts correctly to different writing modes and directions.
Property Values of the 'border-end-start-radius' Property
- Length: Specifies the radius of the curve using length units such as pixels (px) or ems (em).
- Percentage: Sets the radius as a percentage of the element's border box (horizontal radius relative to its width, vertical radius relative to its height), allowing the design to scale responsively with the element.
- Initial: Resets the 'border-end-start-radius' to its default value (
0, a square corner). - Inherit: The element inherits the 'border-end-start-radius' value from its parent.
