v155 · corner shorthands
Logical corners
The physical shorthands name corners by top and bottom. The logical ones name them by block and inline, so they follow the writing mode. Change the mode below and watch one panel keep its shaping where the text starts and the other keep it where it always was.
Flip the writing mode
physical: corner-top-left
Shaped at the top-left, always.
corner-top-left: scoop 30px;
logical: corner-start-start
Shaped where the text starts.
corner-start-start: scoop 30px;
| panel | top-left | top-right | bottom-right | bottom-left |
|---|
This is why the logical variants exist: a component styled with physical corners has to be restyled for every writing mode it might appear in, and a component styled with logical corners does not.