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

The CSS 'border-end-end-radius' property defines the radius of the curve at the end of the border where it meets the end block side of an element, based on the writing and reading direction. This property is part of the CSS Logical Properties. It provides a way to style elements that adapt to the layout's directionality (left-to-right, right-to-left, etc.), making it especially useful in internationalized websites.

CSS 'border-end-end-radius' Property Examples

See the Pen CSS 'border-end-end-radius' Property by Webzstore (@webzstore) on CodePen.

The 'border-end-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-end-end-radius' Property

66.0	15.0	89.0	89.0	75.0

CSS Syntax of the 'border-end-end-radius' Property

border-end-end-radius: length | percentage | initial | inherit;

Usage of the 'border-end-end-radius' Property

Use 'border-end-end-radius' to control the rounding of the corner at the junction of the end of the inline flow and the end of the block flow of an element. This logical property allows for the creation of designs adaptable to different writing modes, ensuring the border-radius applies correctly regardless of the text direction. It is particularly beneficial for creating interfaces that need to support multiple languages and writing systems.

Property Values of the 'border-end-end-radius' Property

• Length: Specifies the radius of the curve using length units (e.g., px, em).
• Percentage: Sets the radius as a percentage of the element's size, allowing for responsive design that scales with the element.
• Initial: Resets the 'border-end-end-radius' to its default value.
• Inherit: The element inherits the 'border-end-end-radius' value from its parent element.

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