CSS border-start-end-radius Property
Description
The border-start-end-radius
CSS property defines the radius of the corner at the start in the block direction and end in the inline direction. This is useful when building styles to work regardless of the text orientation and writing mode.
The block direction is the direction in which text flows, and the inline direction is the direction in which text is written within a line. For example, in a left-to-right language, the block direction is top-to-bottom and the inline direction is left-to-right. However, in a right-to-left language, the block direction is still top-to-bottom, but the inline direction is right-to-left.
The border-start-end-radius
property can be used to set the radius of all four corners of an element, or just the radius of the start and end corners. To set the radius of all four corners, use two values, separated by a space. The first value will be applied to the start and end corners, and the second value will be applied to the top and bottom corners. To set the radius of just the start and end corners, use a single value.
- 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.borderStartEndRadius
Interactive Demo
Start End Radius Property
Syntax
border-start-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 left rounded corner.</div>
div {
width:300px;
height:150px;
display:flex;
justify-content:center;
flex-direction:column;
background-color:#5b6dcd;
color:#fff;
padding:10px;
border-start-end-radius: 40px;
}
Browser Support
The following table will show you the current browser support for the CSS border-start-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