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

For CSS

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

For TailwindCSS v4

@import "@sandlada/material-design-css/tailwind-theme.css";

Usage

<div class="flex">
    <div class="box rounded-none bg-primary"></div>
    <div class="box rounded-extra-small bg-primary"></div>
    <div class="box rounded-small bg-primary"></div>
    <div class="box rounded-medium bg-primary"></div>
    <div class="box rounded-large bg-primary"></div>
    <div class="box rounded-large-increased bg-primary"></div>
    <div class="box rounded-extra-large bg-primary"></div>
    <div class="box rounded-extra-large-increased bg-primary"></div>
    <div class="box rounded-extra-extra-large bg-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 rounded-t-none bg-primary"></div>
    <div class="box rounded-t-extra-small bg-primary"></div>
    <div class="box rounded-t-small bg-primary"></div>
    <div class="box rounded-t-medium bg-primary"></div>
    <div class="box rounded-t-large bg-primary"></div>
    <div class="box rounded-t-large-increased bg-primary"></div>
    <div class="box rounded-t-extra-large bg-primary"></div>
    <div class="box rounded-t-extra-large-increased bg-primary"></div>
    <div class="box rounded-t-extra-extra-large bg-primary"></div>
</div>

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

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