CSS border-start-end-radius Property

The border-start-end-radius property specifies the rounding of the single corner formed by the intersection of an element’s block-start edge and its inline-end edge. As a logical corner property, it targets that corner in a way that follows the element’s writing mode and direction rather than a fixed physical corner, so it is useful when you want corner rounding to adapt automatically for different text directions or vertical writing modes.

Because it is logical, the actual physical corner it controls changes with writing-mode and direction. In the common horizontal-tb writing mode with left-to-right direction this maps to the top-right corner; in the same writing mode with right-to-left direction it maps to the top-left corner. For vertical writing modes the corner similarly follows the inline/end and block/start axes, so the visual corner will move as the axes change without altering the rule that this property targets the block-start × inline-end intersection.

This property is one member of the logical radius family and is intended to be used in concert with its siblings (for example, border-start-start-radius and border-end-end-radius) to express corner radii in a writing-mode-aware manner. It also interacts with the traditional physical shorthand border-radius: when both logical and physical radii are specified for the same resulting corner, the normal cascade, specificity, and origin rules determine which value applies.

When applied, this radius affects the element’s border box rendering - rounding the corner of the border and influencing background painting, clipping, and hit-testing for that corner. Using logical corner properties generally makes components more robust for internationalized UIs, because you can express corner styles relative to the logical flow instead of having to update multiple physical corners when direction or writing mode changes.