border-start-end-radius

This property defines the border radius of the start-end corner of an element.

Which corner is considered the “start-end” corner depends on the element’s directionality, writing mode and text orientation.

Syntax

One or two length or percentage values can be specified.
If one length value is specified, the rounding will be based on a circle, while if two different values are specified, the rounding will be based on an ellipse defined by the two radiuses of that length.
If a percentage values are used the rounding can be both circular or elliptical based on the element’s height and/or width.

/* One length value specified: */
border-start-end-radius: 6px;

/* Two length values specified, will cause elliptical rounding of the corner: */
border-start-end-radius: 3em 1em;

/* Percentage values: */
border-start-end-radius: 5%;
border-start-end-radius: 15% 4%;

Values

length
The length of the radius defined in an explicit length value.

percentage
The length of the radius based on a percentage of the element’s width/height.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-start-end-radius? Submit a codepen.io demo and we'll showcase it here ↴