The CSS ‘border-end-start-radius‘ property defines the radius of the curve at the end border on the start side of an element’s block flow. This logical property allows for the rounding of that specific corner according to the content’s writing mode, 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 | initial | inherit;Usage of the ‘border-end-start-radius’ Property
Use ‘border-end-start-radius‘ to apply a rounded corner at the junction where the end of the inline flow meets the start of the block flow. This is particularly useful in internationalized web applications where the direction of text flow can change, as it ensures that the border-radius adapts correctly to different writing modes.
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 size, allowing the design to scale responsively with the element.
- Initial: Resets the ‘border-end-start-radius‘ to its default value.
- Inherit: The element inherits the ‘border-end-start-radius‘ value from its parent.
Leave a Reply