Intent to Prototype: CSS border side radius shorthands

[Helmut Januschka]

Contact emails

hjanu...@gmail.com

Explainer

https://github.com/w3c/csswg-drafts/pull/7705

Specification

No information provided

Summary

Adds per-side border radius shorthands: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, plus the logical variants border-block-start-radius, border-block-end-radius, border-inline-start-radius, and border-inline-end-radius. Each sets the two border-*-radius longhands of one edge in a single declaration, so developers can round one side of a box without spelling out individual corners.

Blink component

Blink>CSS

Web Feature ID

Missing feature

Motivation

Rounding one edge of a box (e.g. the top of a card or bottom sheet) currently requires two separate border-*-*-radius longhand declarations, and logical (writing-mode aware) variants require even more boilerplate. CSS Borders Level 4 defines per-side radius shorthands (border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, and the logical border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius) that set both corners of one edge in a single declaration. WPT tests already exist under css/css-borders/tentative/parsing/. Spec: https://drafts.csswg.org/css-borders-4/#corner-sizing-side-shorthands

Initial public proposal

https://lists.w3.org/Archives/Public/www-style/2012Oct/0314.html

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/330863443

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6690354148540416?gate=5194565316378624

This intent message was generated by Chrome Platform Status.