CSS border-start-end-radius property

Description

CSS border-start-end-radius is a logical property that defines the length of both horizontal and vertical radii for the start-end corner a box i.e. coverting sharp corners into round shape corners.

The selection of start-end corner depends upon the writing-mode

  • The start-end corner is top-right corner for the horizontal-tb writing-mode.

  • The start-end corner represents bottom-right or bottom-left corner for the vertical-rl or vertical-lr writing-mode respectively.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

border-start-end-radius : +ve length | X-length Y-length

Property values

+ve length (in px)Default

It means the length of both horizontal and vertical radii is 0.

border-start-end-radius: 0px;

+ve length (in percentage)

The length of the horizontal radius is 30% of the width of the border box. Similarly, the length of vertical radius is 30% of the height of the border box.

border-start-end-radius: 30%;

X-radius Y-radius (in px)

These two values represent horizontal and vertical radii. The length of horizontal and vertical radii is 40px and 20px respectively.

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

X-radius Y-radius (in percentage)

The length of the horizontal radius is 30% of the width of the border box. Similarly, the length of vertical radius is 50% of the height of the border box.

border-start-end-radius: 30% 50%;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
border-start-end-radius
×

Ctrl+D