# Shapes

> Cut images, videos, and buttons to rounded expressive shapes with one class.

## Shapes

Add a `.shape-*` class to cut an element to one of twenty rounded shapes. The set follows the Material 3 Expressive shape library. The shape is a mask, so it scales with the element and its curves stay smooth at any size. No JavaScript is needed.

`pebble`

`bean`

`peak`

`dart`

`slice`

`kite`

`cell`

`crest`

`facet`

`spark`

`seal`

`scallop-4`

`scallop-6`

`scallop-7`

`scallop-9`

`scallop-12`

`bloom-4`

`bloom-8`

`spike`

`flare`

## Images and videos

On an `<img>`, `<video>` or `<canvas>`, the class also sets `aspect-ratio: 1` and `object-fit: cover`, so the browser crops the picture to a square instead of stretching the shape. Set the width and the height follows.

![A pug wrapped in a blanket](https://picsum.photos/id/1025/400/300) ![A river between mountains](https://picsum.photos/id/1015/400/400) ![A portrait of a woman](https://picsum.photos/id/64/400/400)

```
<img class="shape-scallop-9" width="160" src="pug.jpg" alt="A pug wrapped in a blanket">
<video class="shape-bloom-4" width="240" src="clip.mp4" controls></video>
```

Native video controls sit at the edges of the box, where most shapes cut them off. Use custom controls, or keep `controls` off for decorative loops.

## Buttons

The shapes are drawn for a square box, so pair them with icon buttons, FABs, or a button with equal width and height. A wide button stretches the shape.

New

```
<button class="icon-button filled large shape-spark" type="button" aria-label="Favorite">
  <span class="material-symbols" aria-hidden="true">favorite</span>
</button>
<button class="btn shape-flare" type="button" style="width: 96px; height: 96px">New</button>
```

The mask would clip the usual focus outline, so a focused shape draws its ring inside its own edge. The ring is a 3px band in the secondary color with a 2px gap. Press Tab to see it. Forced-colors mode paints the band in `Highlight`. Clicks and taps on the cut-away parts of the box pass through to the page behind.

## Notes

The class adds `contain: paint`, which clips overflowing content and makes the element the containing block for absolutely positioned children. The mask cuts shadows and borders along with the rest of the element. Wrap the element if it needs a shadow that follows the shape, and apply `filter: drop-shadow()` to the wrapper.

For a selective Sass build, include `"shapes"` in `$utilities`.

## Corner scale

Rounded corners come from the Material 3 `md.sys.shape.corner` scale. Component shape tokens on that scale read these values, so one override changes every component on that step. Set a component token, such as `--md-comp-card-container-shape`, to change one component. Off-scale corners stay literal.

| Token | Value |
| --- | --- |
| `--md-sys-shape-corner-none` | 0px |
| `--md-sys-shape-corner-extra-small` | 4px |
| `--md-sys-shape-corner-small` | 8px |
| `--md-sys-shape-corner-medium` | 12px |
| `--md-sys-shape-corner-large` | 16px |
| `--md-sys-shape-corner-large-increased` | 20px |
| `--md-sys-shape-corner-extra-large` | 28px |
| `--md-sys-shape-corner-extra-large-increased` | 32px |
| `--md-sys-shape-corner-extra-extra-large` | 48px |
| `--md-sys-shape-corner-full` | 9999px |

```
<style>
  /* Cards, menu items and every other medium corner become 8px. */
  :root { --md-sys-shape-corner-medium: 8px; }
</style>
```

## Cut corners

Material shapes come in a rounded and a cut family. Set `corners="cut"` on the root or on any subtree to turn its corners into straight bevels of the same size. This covers cards, dialogs, sheets, menus, fieldsets, buttons, chips, alerts, snackbars, tooltips, popovers and outlined fields. Set `corners="round"` to put a subtree back. The switch sets `--md-sys-shape-corner-family` to `bevel` or `round`.

Add `.corner-cut` to cut a single element, together with its own radius or a `.corner-*` class. Round indicators such as radios, switches, avatars and `.circle` stay round, because a cut 50% radius is a diamond. Cut corners use CSS `corner-shape`. Browsers without it, including Firefox 157, keep rounded corners.

A cut card

Cut button

```
<main corners="cut">…</main>
<div class="bordered corner-large corner-cut">One cut panel</div>
```