PostCSS Smooth Corners

PostCSS plugin to use smooth squircle corners on your website. See demo.

Round corners start suddenly. Squircle corners start slowly and smoothly. Because of this, they look softer, like iPhone icons. Browsers now support them with corner-shape: squircle.

The plugin has 2 modes:

• Fix size (default): you add corner-shape: squircle where you need it. The plugin increases border-radius, because with the same radius a squircle looks smaller than a round corner.
• Auto squircle (auto: true): the plugin adds corner-shape: squircle to every border-radius and fixes the size.

In both modes, browsers without corner-shape support will keep round corners with the original radius.

/* Input CSS */
.card {
  corner-shape: squircle;
  border-radius: 1rem;
}

/* Output CSS */
.card {
  corner-shape: squircle;
  border-radius: 1rem;
  @supports (corner-shape: squircle) {
    border-radius: 1.715rem;
  }
}

Postcss Smooth Corners is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups.

Docs

Read full docs here.