CSS border-start-start-radius Property

Description

The border-start-start-radius CSS property defines the radius of the corner at the start in the block and inline directions. It is a logical border radius, which means that it is independent of the element's writing mode, direction, and text-orientation. This makes it useful for building styles that work regardless of how the element is displayed.
The border-start-start-radius property can be set using a single value or two values. If a single value is used, it will be applied to both the block and inline directions. If two values are used, the first value will be applied to the block direction and the second value will be applied to the inline direction.
The values of the border-start-start-radius property can be expressed in any unit allowed by the CSS <length> data type, such as pixels, percentages, or ems. Percentages for the horizontal axis refer to the width of the box, and percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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.borderStartStartRadius

Interactive Demo

border-start-start-radius: 40px 40px;

border-start-start-radius: 100px 50px;
direction: rtl;

border-start-start-radius: 30%;
writing-mode: vertical-lr;

border-start-start-radius: 30%;
writing-mode: vertical-rl;

Example of the Border
Start Start Radius Property

Syntax

border-start-start-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

HTML

<div>This is a box with a top left rounded corner.</div>

CSS

div {
  width:300px;
  height:150px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  background-color:#5b6dcd;
  color:#fff;
  padding:10px;
  border-start-start-radius: 40px;
}

Result

Editor