@sandlada/material-design-css/shape/shape-utilities.css

A ready-made npm package for a collection of css styles in the material design style.

@layer material-design-system.shape.corner {
    :root {
        --_none: var(--md-sys-shape-corner-value-none, 0px);
        --_extra-small: var(--md-sys-shape-corner-value-extra-small, 4px);
        --_small: var(--md-sys-shape-corner-value-small, 8px);
        --_medium: var(--md-sys-shape-corner-value-medium, 12px);
        --_large: var(--md-sys-shape-corner-value-large, 16px);
        --_large-increased: var(--md-sys-shape-corner-value-large-increased, 20px);
        --_extra-large: var(--md-sys-shape-corner-value-extra-large, 28px);
        --_extra-large-increased: var(--md-sys-shape-corner-value-extra-large-increased, 32px);
        --_extra-extra-large: var(--md-sys-shape-corner-value-extra-extra-large, 48px);
    }
}

@layer material-design-system.shape.corner {
    .rounded-none {
        border-start-start-radius: var(--_none);
        border-start-end-radius: var(--_none);
        border-end-start-radius: var(--_none);
        border-end-end-radius: var(--_none);
    }

    .rounded-extra-small {
        border-start-start-radius: var(--_extra-small);
        border-start-end-radius: var(--_extra-small);
        border-end-start-radius: var(--_extra-small);
        border-end-end-radius: var(--_extra-small);
    }

    .rounded-small {
        border-start-start-radius: var(--_small);
        border-start-end-radius: var(--_small);
        border-end-start-radius: var(--_small);
        border-end-end-radius: var(--_small);
    }

    .rounded-medium {
        border-start-start-radius: var(--_medium);
        border-start-end-radius: var(--_medium);
        border-end-start-radius: var(--_medium);
        border-end-end-radius: var(--_medium);
    }

    .rounded-large {
        border-start-start-radius: var(--_large);
        border-start-end-radius: var(--_large);
        border-end-start-radius: var(--_large);
        border-end-end-radius: var(--_large);
    }

    .rounded-large-increased {
        border-start-start-radius: var(--_large-increased);
        border-start-end-radius: var(--_large-increased);
        border-end-start-radius: var(--_large-increased);
        border-end-end-radius: var(--_large-increased);
    }

    .rounded-extra-large {
        border-start-start-radius: var(--_extra-large);
        border-start-end-radius: var(--_extra-large);
        border-end-start-radius: var(--_extra-large);
        border-end-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-increased {
        border-start-start-radius: var(--_extra-large-increased);
        border-start-end-radius: var(--_extra-large-increased);
        border-end-start-radius: var(--_extra-large-increased);
        border-end-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-extra-large {
        border-start-start-radius: var(--_extra-extra-large);
        border-start-end-radius: var(--_extra-extra-large);
        border-end-start-radius: var(--_extra-extra-large);
        border-end-end-radius: var(--_extra-extra-large);
    }

    .rounded-none-t {
        border-start-start-radius: var(--_none);
        border-start-end-radius: var(--_none);
    }

    .rounded-none-r {
        border-start-end-radius: var(--_none);
        border-end-end-radius: var(--_none);
    }

    .rounded-none-b {
        border-end-start-radius: var(--_none);
        border-end-end-radius: var(--_none);
    }

    .rounded-none-l {
        border-start-start-radius: var(--_none);
        border-end-start-radius: var(--_none);
    }

    .rounded-none-tl {
        border-start-start-radius: var(--_none);
    }

    .rounded-none-tr {
        border-start-end-radius: var(--_none);
    }

    .rounded-none-bl {
        border-end-start-radius: var(--_none);
    }

    .rounded-none-br {
        border-end-end-radius: var(--_none);
    }


    .rounded-extra-small-t {
        border-start-start-radius: var(--_extra-small);
        border-start-end-radius: var(--_extra-small);
    }

    .rounded-extra-small-r {
        border-start-end-radius: var(--_extra-small);
        border-end-end-radius: var(--_extra-small);
    }

    .rounded-extra-small-b {
        border-end-start-radius: var(--_extra-small);
        border-end-end-radius: var(--_extra-small);
    }

    .rounded-extra-small-l {
        border-start-start-radius: var(--_extra-small);
        border-end-start-radius: var(--_extra-small);
    }

    .rounded-extra-small-tl {
        border-start-start-radius: var(--_extra-small);
    }

    .rounded-extra-small-tr {
        border-start-end-radius: var(--_extra-small);
    }

    .rounded-extra-small-bl {
        border-end-start-radius: var(--_extra-small);
    }

    .rounded-extra-small-br {
        border-end-end-radius: var(--_extra-small);
    }

    .rounded-small-t {
        border-start-start-radius: var(--_small);
        border-start-end-radius: var(--_small);
    }

    .rounded-small-r {
        border-start-end-radius: var(--_small);
        border-end-end-radius: var(--_small);
    }

    .rounded-small-b {
        border-end-start-radius: var(--_small);
        border-end-end-radius: var(--_small);
    }

    .rounded-small-l {
        border-start-start-radius: var(--_small);
        border-end-start-radius: var(--_small);
    }

    .rounded-small-tl {
        border-start-start-radius: var(--_small);
    }

    .rounded-small-tr {
        border-start-end-radius: var(--_small);
    }

    .rounded-small-bl {
        border-end-start-radius: var(--_small);
    }

    .rounded-small-br {
        border-end-end-radius: var(--_small);
    }

    .rounded-medium-t {
        border-start-start-radius: var(--_medium);
        border-start-end-radius: var(--_medium);
    }

    .rounded-medium-r {
        border-start-end-radius: var(--_medium);
        border-end-end-radius: var(--_medium);
    }

    .rounded-medium-b {
        border-end-start-radius: var(--_medium);
        border-end-end-radius: var(--_medium);
    }

    .rounded-medium-l {
        border-start-start-radius: var(--_medium);
        border-end-start-radius: var(--_medium);
    }

    .rounded-medium-tl {
        border-start-start-radius: var(--_medium);
    }

    .rounded-medium-tr {
        border-start-end-radius: var(--_medium);
    }

    .rounded-medium-bl {
        border-end-start-radius: var(--_medium);
    }

    .rounded-medium-br {
        border-end-end-radius: var(--_medium);
    }

    .rounded-large-t {
        border-start-start-radius: var(--_large);
        border-start-end-radius: var(--_large);
    }

    .rounded-large-r {
        border-start-end-radius: var(--_large);
        border-end-end-radius: var(--_large);
    }

    .rounded-large-b {
        border-end-start-radius: var(--_large);
        border-end-end-radius: var(--_large);
    }

    .rounded-large-l {
        border-start-start-radius: var(--_large);
        border-end-start-radius: var(--_large);
    }

    .rounded-large-tl {
        border-start-start-radius: var(--_large);
    }

    .rounded-large-tr {
        border-start-end-radius: var(--_large);
    }

    .rounded-large-bl {
        border-end-start-radius: var(--_large);
    }

    .rounded-large-br {
        border-end-end-radius: var(--_large);
    }

    .rounded-large-increased-t {
        border-start-start-radius: var(--_large-increased);
        border-start-end-radius: var(--_large-increased);
    }

    .rounded-large-increased-r {
        border-start-end-radius: var(--_large-increased);
        border-end-end-radius: var(--_large-increased);
    }

    .rounded-large-increased-b {
        border-end-start-radius: var(--_large-increased);
        border-end-end-radius: var(--_large-increased);
    }

    .rounded-large-increased-l {
        border-start-start-radius: var(--_large-increased);
        border-end-start-radius: var(--_large-increased);
    }

    .rounded-large-increased-tl {
        border-start-start-radius: var(--_large-increased);
    }

    .rounded-large-increased-tr {
        border-start-end-radius: var(--_large-increased);
    }

    .rounded-large-increased-bl {
        border-end-start-radius: var(--_large-increased);
    }

    .rounded-large-increased-br {
        border-end-end-radius: var(--_large-increased);
    }

    .rounded-extra-large-t {
        border-start-start-radius: var(--_extra-large);
        border-start-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-r {
        border-start-end-radius: var(--_extra-large);
        border-end-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-b {
        border-end-start-radius: var(--_extra-large);
        border-end-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-l {
        border-start-start-radius: var(--_extra-large);
        border-end-start-radius: var(--_extra-large);
    }

    .rounded-extra-large-tl {
        border-start-start-radius: var(--_extra-large);
    }

    .rounded-extra-large-tr {
        border-start-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-bl {
        border-end-start-radius: var(--_extra-large);
    }

    .rounded-extra-large-br {
        border-end-end-radius: var(--_extra-large);
    }

    .rounded-extra-large-increased-t {
        border-start-start-radius: var(--_extra-large-increased);
        border-start-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-r {
        border-start-end-radius: var(--_extra-large-increased);
        border-end-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-b {
        border-end-start-radius: var(--_extra-large-increased);
        border-end-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-l {
        border-start-start-radius: var(--_extra-large-increased);
        border-end-start-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-tl {
        border-start-start-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-tr {
        border-start-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-bl {
        border-end-start-radius: var(--_extra-large-increased);
    }

    .rounded-extra-large-increased-br {
        border-end-end-radius: var(--_extra-large-increased);
    }

    .rounded-extra-extra-large-t {
        border-start-start-radius: var(--_extra-extra-large);
        border-start-end-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-r {
        border-start-end-radius: var(--_extra-extra-large);
        border-end-end-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-b {
        border-end-start-radius: var(--_extra-extra-large);
        border-end-end-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-l {
        border-start-start-radius: var(--_extra-extra-large);
        border-end-start-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-tl {
        border-start-start-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-tr {
        border-start-end-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-bl {
        border-end-start-radius: var(--_extra-extra-large);
    }

    .rounded-extra-extra-large-br {
        border-end-end-radius: var(--_extra-extra-large);
    }
}