Corners
A positional object for cornerRadius when corners differ. Used as an alternative to a single scalar value. Introduced in schema 1.0.0.
interface Corners { topStart?: Style; topEnd?: Style; bottomEnd?: Style; bottomStart?: Style;}Properties
| Property | Type | Required | Description |
|---|---|---|---|
topStart | Style | No | Top-start corner |
topEnd | Style | No | Top-end corner |
bottomEnd | Style | No | Bottom-end corner |
bottomStart | Style | No | Bottom-start corner |
Corner names use logical directions (topStart/bottomEnd) rather than physical (topLeft/bottomRight) for bidirectional layout support.
Examples
When all corners are the same, cornerRadius is a scalar:
cornerRadius: 8When corners differ, cornerRadius is a Corners object:
cornerRadius: topStart: 8 topEnd: 8 bottomEnd: 0 bottomStart: 0Further Reading
- ADR 010 — Sides and Corners Composite Types — replaces flat padding/stroke/corner fields with
SidesandCornerscomposites using logical directions