Material Design 3 shape tokens
Browse tokens
| Token | Value |
|---|---|
Fully roundedmd.sys.shape.corner.full | Full Fully roundedFull md.sys.shape.corner.fullFull |
Extra large top roundingmd.sys.shape.corner.extra-large.top | Default: 0dp · Top-left: 28dp · Top-right: 28dp Extra large top roundingDefault: 0dp · Top-left: 28dp · Top-right: 28dp md.sys.shape.corner.extra-large.topDefault: 0dp · Top-left: 28dp · Top-right: 28dp |
Extra large roundingmd.sys.shape.corner.extra-large | 28dp Extra large rounding28dp md.sys.shape.corner.extra-large28dp |
Large top roundingmd.sys.shape.corner.large.top | Default: 0dp · Top-left: 16dp · Top-right: 16dp Large top roundingDefault: 0dp · Top-left: 16dp · Top-right: 16dp md.sys.shape.corner.large.topDefault: 0dp · Top-left: 16dp · Top-right: 16dp |
Large end roundingmd.sys.shape.corner.large.end | Default: 0dp · Top-right: 16dp · Bottom-right: 16dp Large end roundingDefault: 0dp · Top-right: 16dp · Bottom-right: 16dp md.sys.shape.corner.large.endDefault: 0dp · Top-right: 16dp · Bottom-right: 16dp |
Large start roundingmd.sys.shape.corner.large.start | Default: 0dp · Top-left: 16dp · Bottom-left: 16dp Large start roundingDefault: 0dp · Top-left: 16dp · Bottom-left: 16dp md.sys.shape.corner.large.startDefault: 0dp · Top-left: 16dp · Bottom-left: 16dp |
Large roundingmd.sys.shape.corner.large | 16dp Large rounding16dp md.sys.shape.corner.large16dp |
Medium roundingmd.sys.shape.corner.medium | 12dp Medium rounding12dp md.sys.shape.corner.medium12dp |
Small roundingmd.sys.shape.corner.small | 8dp Small rounding8dp md.sys.shape.corner.small8dp |
Extra small top roundingmd.sys.shape.corner.extra-small.top | Default: 0dp · Top-left: 4dp · Top-right: 4dp Extra small top roundingDefault: 0dp · Top-left: 4dp · Top-right: 4dp md.sys.shape.corner.extra-small.topDefault: 0dp · Top-left: 4dp · Top-right: 4dp |
Extra small roundingmd.sys.shape.corner.extra-small | 4dp Extra small rounding4dp md.sys.shape.corner.extra-small4dp |
No roundingmd.sys.shape.corner.none | 0dp No rounding0dp md.sys.shape.corner.none0dp |
Large increased roundingmd.sys.shape.corner.large-increased | 20dp Large increased rounding20dp md.sys.shape.corner.large-increased20dp |
Extra large increased roundingmd.sys.shape.corner.extra-large-increased | 32dp Extra large increased rounding32dp md.sys.shape.corner.extra-large-increased32dp |
Extra extra large roundingmd.sys.shape.corner.extra-extra-large | 48dp Extra extra large rounding48dp md.sys.shape.corner.extra-extra-large48dp |
No corner valuemd.sys.shape.corner-value.none | 0dp No corner value0dp md.sys.shape.corner-value.none0dp |
Extra small corner valuemd.sys.shape.corner-value.extra-small | 4dp Extra small corner value4dp md.sys.shape.corner-value.extra-small4dp |
Small corner valuemd.sys.shape.corner-value.small | 8dp Small corner value8dp md.sys.shape.corner-value.small8dp |
Medium corner valuemd.sys.shape.corner-value.medium | 12dp Medium corner value12dp md.sys.shape.corner-value.medium12dp |
Large corner valuemd.sys.shape.corner-value.large | 16dp Large corner value16dp md.sys.shape.corner-value.large16dp |
Large increased corner valuemd.sys.shape.corner-value.large-increased | 20dp Large increased corner value20dp md.sys.shape.corner-value.large-increased20dp |
Extra large corner valuemd.sys.shape.corner-value.extra-large | 28dp Extra large corner value28dp md.sys.shape.corner-value.extra-large28dp |
Extra large increased corner valuemd.sys.shape.corner-value.extra-large-increased | 32dp Extra large increased corner value32dp md.sys.shape.corner-value.extra-large-increased32dp |
Extra extra large corner valuemd.sys.shape.corner-value.extra-extra-large | 48dp Extra extra large corner value48dp md.sys.shape.corner-value.extra-extra-large48dp |