CSS border-start-end-radius Property


Example

Add rounded corners to the block-start and the inline-end sides of some elements:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}

#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}

#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}

#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-start-end-radius property defines the radius of the corner between the block-start and the inline-end sides of the element.

Note: The related CSS properties writing-mode, text-orientation and direction define block and inline directions. That is why these properties also affects the result of the border-start-end-radius property. For pages in English, inline direction is left to right and block direction is downward.

If the border-start-end-radius property has two values, the corner will be an ellipse:

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

If the border-start-end-radius property has one value, the corner will be a circle:

  • border-start-end-radius: 50px;

The CSS border-start-end-radius property is very similar to CSS properties border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius and border-top-right-radius, but the border-start-end-radius property is dependent on block and inline directions.

Show demo ❯

Default value: 0
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.borderStartEndRadius="50px" Try it

Browser Support

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

Property
border-start-end-radius 89.0 89.0 66.0 15.0 75.0


CSS Syntax

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

Property Values

Value Description Demo
0 Default value. Demo ❯
length Defines the shape of the corner at block-start and inline-end. Read about length units Demo ❯
% Defines the shape of the corner at block-start and inline-end in percentange of length of element on corresponding axis. Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

With direction property

The position of a rounded corner at the start in the block direction, and at the end in the inline direction, is affected by the direction property:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}
Try it Yourself »

With writing-mode property

The position of a rounded corner at the start in the block direction, and at the end in the inline direction, is affected by the writing-mode property:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Rounded Corners

CSS border-bottom-left-radius property: CSS Border-bottom-left-radius property

CSS border-bottom-right-radius property: CSS Border-bottom-right-radius property

CSS border-top-left-radius property: CSS Border-top-left-radius property

CSS border-top-right-radius property: CSS Border-top-right-radius property

CSS direction property: CSS Direction property

CSS text-orientation property: CSS Text-orientation property

CSS writing-mode property: CSS Writing-mode property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.