CSS 'border-end-start-radius' Property Explained

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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website