Shape

The Material Design 3 shape system uses a size-based scale with ten styles (We did not implement shape-full because shape-full requires a large value, such as 9999px, which would break the element’s transition):

Corner	Value
none	0px
extra-small	4px
small	8px
medium	12px
large	16px
large-increased	20px
extra-large	28px
extra-large-increased	32px
extra-extra-large	48px

Each style provides a different orientation:

• t
• r
• b
• l
• tl
• tr
• bl
• br

For a detailed description of M3 Shape, see Definition of M3 Shape.

Import

Via JS/TS

import "@sandlada/material-design-css/shape.css"

Via CSS

@import "@sandlada/material-design-css/shape.css";

Usage

<div class="flex">
    <div class="box shape-none primary"></div>
    <div class="box shape-extra-small primary"></div>
    <div class="box shape-small primary"></div>
    <div class="box shape-medium primary"></div>
    <div class="box shape-large primary"></div>
    <div class="box shape-large-increased primary"></div>
    <div class="box shape-extra-large primary"></div>
    <div class="box shape-extra-large-increased primary"></div>
    <div class="box shape-extra-extra-large primary"></div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

<div class="flex">
    <div class="box shape-none-tr primary"></div>
    <div class="box shape-extra-small-tr primary"></div>
    <div class="box shape-small-tr primary"></div>
    <div class="box shape-medium-tr primary"></div>
    <div class="box shape-large-tr primary"></div>
    <div class="box shape-large-increased-tr primary"></div>
    <div class="box shape-extra-large-tr primary"></div>
    <div class="box shape-extra-large-increased-tr primary"></div>
    <div class="box shape-extra-extra-large-tr primary"></div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>