BETA

Mask Image

Paint a squircle mask on an element.

Variables

VariableType
--squircle-mode
mask-image | background

Usage

.squircle {
  mask-image: paint(squircle);
  --squircle-mode: mask-image;
}

We advise you to use a no-repeat mask-image to avoid certain mini visual bugs that might occur on slow devices when resizing a squircle (only on browsers not compatible with CSS.paintWorklet).

.squircle {
  mask-image: paint(squircle);
  --squircle-mode: mask-image;
 
  @supports not (mask-image: paint(squircle)) {
    mask-repeat: no-repeat;
  }
}

By Skyleen. The source code is available on GitHub.

On this page