The border-start-start-radius property controls the rounding of the corner that sits at the intersection of the inline-start edge and the block-start edge of an element. As a logical corner property it describes shape in terms of flow-relative sides rather than fixed physical sides (top/left/right/bottom). That makes it useful for creating consistent rounded-corner designs across different writing modes and text directions without having to change rules for each language or orientation.

Because it is flow-relative, the actual physical corner that border-start-start-radius affects depends on the element’s writing mode and direction. In a horizontal writing mode with left-to-right direction it targets what you would traditionally think of as the top-left corner; in the same writing mode with right-to-left direction it targets the top-right corner. In vertical writing modes the corner mapping shifts accordingly to remain at the intersection of the inline-start and block-start axes, so the same logical rule keeps the intended visual relation to text flow even as the page orientation changes.

This property composes with other corner properties and the overall corner-shaping behavior of the element. It is one of the logical corner properties that correspond to the more familiar physical shorthand border-radius as well as the other logical corner longhands (for example, the inline-start/block-end corner available via border-start-end-radius). Rounding defined by border-start-start-radius contributes to how the element’s border and background are painted and how overflow is clipped; that interaction can be observed alongside properties such as background-clip, which determines whether backgrounds are constrained by the rounded border shape. When authoring for multilingual or rotated layouts, using this logical corner property helps keep corner styles semantically tied to text flow rather than to fixed physical edges.