'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
md.sys.shape.corner-value.medium A primitive length. Nine of them, from none through extra-extra-large.
Shape · Learn · Guide
Corner values compose into complete shapes
Material keeps two things apart that are easy to confuse. A corner value is a single number applied to one corner. A complete corner shape is a set of four of them. Every asymmetric shape in the system — a top-rounded sheet, a start-rounded segmented button — is just a different arrangement of the same ten values.
md.sys.shape.corner.medium.top Four corner values as one object. The CSS border-radius shorthand
is only one serialisation of it.
corner.full is categorical Material defines it as a circle, not a length — how round it renders depends on the element's
size. There is no corner-value.full, and the web's 9999px is a practical serialisation of that circle.
The composition grammar
Round only the edges that belong to the group
Start and end are logical: they follow the document's writing direction rather than a fixed left and right.
- top-start
- 10px
- top-end
- 10px
- bottom-end
- 0px
- bottom-start
- 0px
--md-sys-shape-corner-large-top rounded-lg-top border-radius: 10px 10px 0px 0px Resolve and copy this in the picker →Live from your theme
The ten corner styles
Magnitude, not meaning. Nothing here says "button" — the component token carries that.
0px 2px 6px 8px 10px 14px 18px 20px 32px 9999px complete shape only9 of these are corner values; full exists
only as a complete shape.