CSS border-end-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-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

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

Last updated by CSSPortal on: 1st January 2024