CSS border-start-start-radius to Physical Corners

The CSS border-start-start-radius property defines the curvature of an element's corner using logical dimensions rather than fixed physical locations. Instead of directly targeting a static corner like top-left or top-right, this property dynamically maps to a physical corner based on the element's writing mode (writing-mode) and text direction (direction). This approach allows borders to adapt automatically to different languages and reading orientations without the need for manual overrides.

The Logic of "Start-Start"

The name border-start-start-radius is derived from two CSS flow-relative axes:

1. The Block Axis (first "start"): Refers to the start edge of the block flow direction—the direction in which blocks of content (like paragraphs) are stacked.
2. The Inline Axis (second "start"): Refers to the start edge of the inline flow direction—the direction in which text flows within a single line.

Therefore, border-start-start-radius always targets the intersection where the block-start edge meets the inline-start edge.

Physical Mapping Across Writing Modes and Directions

The physical corner targeted by border-start-start-radius shifts depending on the layout context established by writing-mode and direction.

1. Horizontal Writing Mode (writing-mode: horizontal-tb)

This is the default configuration for languages like English, Spanish, and Arabic. Content stacks from top to bottom (block-start is the top).

• Left-to-Right (direction: ltr): Inline-start is on the left. The corner resolves to border-top-left-radius.
• Right-to-Left (direction: rtl): Inline-start is on the right. The corner resolves to border-top-right-radius.

2. Vertical Right-to-Left Writing Mode (writing-mode: vertical-rl)

Used in traditional East Asian scripts. Content lines stack from right to left (block-start is the right edge), and text flows vertically from top to bottom.

• Left-to-Right (direction: ltr): Inline-start is at the top. The corner resolves to border-top-right-radius.
• Right-to-Left (direction: rtl): Inline-start is at the bottom. The corner resolves to border-bottom-right-radius.

3. Vertical Left-to-Right Writing Mode (writing-mode: vertical-lr)

Used in scripts like traditional Mongolian. Content lines stack from left to right (block-start is the left edge), and text flows vertically from top to bottom.

• Left-to-Right (direction: ltr): Inline-start is at the top. The corner resolves to border-top-left-radius.
• Right-to-Left (direction: rtl): Inline-start is at the bottom. The corner resolves to border-bottom-left-radius.

Summary Mapping Reference

By leveraging border-start-start-radius, UI components maintain their intended visual hierarchy—such as rounding the leading corner of a speech bubble, card, or tab—across both Western and bidirectional or vertical layouts seamlessly.