CSS border-end-end-radius Property
Description
The border-end-end-radius
CSS property defines the radius of the corner at the end in the block and inline directions. It is a logical property, meaning that it maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation.
The border-end-end-radius
property can be used to create rounded corners on elements regardless of their text direction or writing mode. This is useful for creating responsive designs that work well in all languages and on all devices.
The border-end-end-radius
property can take one, two, three, or four values. If one value is specified, it is applied to all four corners of the element. If two values are specified, the first value is applied to the block-start and inline-end corners, and the second value is applied to the block-end and inline-start corners. If three values are specified, the first value is applied to the block-start corner, the second value is applied to the inline-end corner, and the third value is applied to both the block-end and inline-start corners. If four values are specified, they are applied to the block-start, inline-end, block-end, and inline-start corners, respectively.
- Initial value
- 0
- Applies to
- all elements
- Inherited
- no
- Computed value
- two absolute lengths or percentages
- Animatable
- a length, percentage or calc();
- JavaScript syntax
- object.style.borderEndEndRadius
Interactive Demo
End End Radius Property
Syntax
border-end-end-radius: <length-percentage>
Values
- <length-percentage>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type.
Example
<div>This is a box with a bottom right rounded corner.</div>
div {
width:300px;
height:150px;
display:flex;
justify-content:center;
flex-direction:column;
background-color:#5b6dcd;
color:#fff;
padding:10px;
border-end-end-radius: 40px;
}
Browser Support
The following table will show you the current browser support for the CSS border-end-end-radius
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
89 | 89 | 66 | 75 | 15 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
89 | 66 | 63 | 15 | 15 | 89 |
Last updated by CSSPortal on: 1st January 2024