Support the flow-relative Corner Rounding properties following CSS Logical Properties and Values spec. Specifically, the following logical properties are included: border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius. The flow-relative Corner Rounding properties (border-*-radius) will allow to set top-left, bottom-left, top-right and bottom-right box corners with logical mappings rather than physical properties.

Motivation

The flow-relative properties allow authors to set the different corner border radius depending on the direction and writing mode of the page.

Demo

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius

Specification

Specification link

Status: Specification being incubated in a Community Group

Status in Chromium

Blink components: Blink>CSS

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

• Firefox: Shipped/Shipping
• Safari: No signal
• Web Developers: No signals

Owners

• zsun@igalia.com
• rego@igalia.com

Last updated on 2021-12-13