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.

---

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-smooth-corners

Step 2: Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

+ import smoothCorners from 'postcss-smooth-corners'

  export default {
    plugins: [
+     smoothCorners(),
      autoprefixer
    ]
  }

The output CSS uses CSS Nesting. If you need to support old browsers, put postcss-nesting after this plugin.

Modes

Fix Size

By default, the plugin changes only rules with corner-shape: squircle. It increases border-radius by 1.715 (and rounds pixels) inside @supports, so the squircle will have the same visual size as the round corner from the design.

smoothCorners()

/* Input CSS */
.card {
  corner-shape: squircle;
  border-radius: 10px;
}
.button {
  border-radius: 10px;
}

/* Output CSS */
.card {
  corner-shape: squircle;
  border-radius: 10px;
  @supports (corner-shape: squircle) {
    border-radius: 17px;
  }
}
.button {
  border-radius: 10px;
}

Auto Squircle

With auto: true, the plugin makes all corners squircle. It adds corner-shape: squircle to every border-radius and fixes the size. It doesn’t change circles (50% or more) and very small radius.

smoothCorners({ auto: true })

/* Input CSS */
.card {
  border-radius: 1rem;
}
.avatar {
  border-radius: 50%;
}

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

Set corner-shape: round to keep round corners for a specific rule.

Options

autoMinSize

In auto mode, radius smaller than this value (in pixels) will keep round corners. Default is 5.

smoothCorners({ auto: true, autoMinSize: 8 })

props

Regexp for custom properties with radius values. The plugin can’t increase radius inside var(), so you can increase the values of your design tokens instead.

smoothCorners({ props: /^--radius-/ })

/* Input CSS */
:root {
  --radius-m: 8px;
}

/* Output CSS */
:root {
  --radius-m: 8px;
  @supports (corner-shape: squircle) {
    --radius-m: 14px;
  }
}

Inheritance

The plugin adds corner-shape: inherit to border-radius: inherit to copy the corner shape together with the radius from the parent.

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

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