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

Documentation

Specification

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 89
  • Chrome for Android release 89
  • Android WebView release 89

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Last updated on 2021-02-22