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;

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

<div>This is a box with a top 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-start-radius: 40px;
}

Browser Support

The following table will show you the current browser support for the CSS border-start-start-radius property.

Desktop
89	89	66	75	15

Tablets / Mobile
89	66	63	15	15	89

Last updated by CSSPortal on: 1st January 2024