Skip to content

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

PropertyTypeRequiredDescription
topStartStyleNoTop-start corner
topEndStyleNoTop-end corner
bottomEndStyleNoBottom-end corner
bottomStartStyleNoBottom-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: 8

When corners differ, cornerRadius is a Corners object:

cornerRadius:
topStart: 8
topEnd: 8
bottomEnd: 0
bottomStart: 0

Further Reading