CSS flow-relative Corner Rounding properties

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 89)
Intent stage: Shipped

Summary

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.

Standards & signals

Specification: https://drafts.csswg.org/css-logical/#border-radius-properties
Firefox: Shipped/Shipping
Safari: No signal — In the past Apple was positive about adding support for the rest of the spec (https://lists.webkit.org/pipermail/webkit-dev/2018-August/030086.html).
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1155270

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

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

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding#Flow_relative_border-radius_properties

View on chromestatus.com