border-end-end-radius

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation.

/* <length> values */
/* With one value the corner will be a circle */
border-end-end-radius: 10px;  
border-end-end-radius: 1em;   

/* With two values the corner will be an ellipse */
border-end-end-radius: 1em 2em;

/* Global values */
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: unset;

For instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property.

Syntax

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. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Formal syntax

<length-percentage>{1,2}

where
<length-percentage> = <length> | <percentage>

Example

HTML Content

<div>
  <p class="exampleText">Example</p>
</div>

CSS Content

div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}

Specification

Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'border-end-end-radius' in that specification.
Editor's Draft Initial definition.
Initial value0
Applies toall elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the corresponding dimension of the border box
Mediavisual
Computed valuetwo absolute <length>s or <percentage>s
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-end-end-radiusChrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also