The CSS ‘border-start-end-radius‘ property defines the radius of the border at the start-end corner of an element. This property is part of the CSS Logical Properties and specifies the rounding of the corner where the block start meets the inline end, depending on the writing mode. This property is useful for creating designs that adapt to different text directions, ensuring rounded corners maintain their intended position across languages and scripts.
CSS ‘border-start-end-radius’ Property Examples
See the Pen CSS ‘border-start-end-radius’ Property by Webzstore (@webzstore) on CodePen.
The ‘border-start-end-radius‘ property enhances CSS’s capability to create flexible, direction-aware designs, supporting the development of web content that is accessible and visually consistent across various languages and writing modes.
Browser Support For ‘border-start-end-radius’ Property
 |  |  |  |  |
| 66.0 | 15.0 | 89.0 | 89.0 | 75.0 |
CSS Syntax of the ‘border-start-end-radius’ Property
border-start-end-radius: length | percentage | initial | inherit;Usage of the ‘border-start-end-radius’ Property
Utilize ‘border-start-end-radius‘ to apply a rounded corner at the specific intersection of the start of the block direction and the end of the inline direction of an element. This is particularly beneficial for internationalized websites, where the layout may need to accommodate right-to-left (RTL) or left-to-right (LTR) text directions, maintaining a consistent design aesthetic that respects the logical flow of content.
Property Values of the ‘border-start-end-radius’ Property
- Length: Specifies the radius using length units (e.g., px, em).
- Percentage: Defines the radius as a percentage of the element’s size, allowing for responsive design adjustments.
- Initial: Resets the ‘border-start-end-radius‘ to its default value.
- Inherit: Inherits the ‘border-start-end-radius‘ from the parent element.
Leave a Reply