CSS border-start-start-radius property

Definition and Usage

border-start-start-radius The attribute is used to define the rounding radius between the block start (block-start) and inline start (inline-start) of the element block direction.

Note:related CSS properties writing-mode,text-orientation and direction It defines the block direction and inline direction. That's why these attributes also affect border-start-start-radius The result of the attribute. For English pages, the inline direction is from left to right, and the block direction is downward.

If border-start-start-radius If an attribute has two values, the rounding will be an ellipse:

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

If border-start-start-radius If an attribute has a value, the rounding will be a circle:

border-start-start-radius: 50px;

CSS border-start-start-radius attribute and border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius and border-top-right-radius is very similar, but border-start-start-radius The attribute depends on the block direction and the inline direction.

Instance

Example 1

Add rounded corners to the start of the block direction and the start of the inline direction of some elements:

#example1 {
  background-color: lightblue;
  border-start-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  writing-mode: vertical-rl;
}

Try it yourself

Example 2: Combined with the direction attribute

The rounded corner position at the start of the block direction and the start of the inline direction is affected by direction Impact of the attribute:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-start-radius: 25px;
}

Try it yourself

Example 3: Combined with the writing-mode attribute

The rounded corner position at the start of the block direction and the start of the inline direction is affected by writing-mode Impact of the attribute:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-start-radius: 25px;
}

Try it yourself

CSS syntax

border-start-start-radius: 0|length|initial|inherit;

Attribute value

Technical details

Browser support

The numbers in the table represent the browser version that first fully supports this property.

Related page

Tutorial:CSS rounded corners

Reference:CSS border-bottom-left-radius attribute

Reference:CSS border-bottom-right-radius attribute

Reference:CSS border-top-left-radius property

Reference:CSS border-top-right-radius property

Reference:CSS direction attribute

Reference:CSS text-orientation attribute

Reference:CSS writing-mode attribute