CSS border-start-end-radius Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Example of the Border
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
Edge Chrome Firefox Opera Safari
8989667515
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
896663151589

Last updated by CSSPortal on: 1st January 2024