1.0.8 • Public • Published

Smooth Corners

npm npm deps bundlephobia

checks devDeps sponsor

Superellipse masks using the CSS Houdini API

Static demo of Smooth Corners


Live demo featuring several different --smooth-corners values and an interactive editor


To avoid leaking visited sites, the CSS Paint API is disabled on Chromium-based browsers for <a> elements with an href attribute and all children of that element. For further details see the following:

To work around this limitation, mask-image: paint(smooth-corners) can be applied to the parent element of the <a> element, for example:

<div style='mask-image: paint(smooth-corners)'>
  <a href=''>Smooth Corners</a>



Add mask-image: paint(smooth-corners) to the elements you want to mask

Default (Squircle)

.squircle {
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257; /* So you can see it */

Customise Curvature

You can customise the mask curvature by using a CSS variable. This can be scoped locally to the selector or defined globally in :root {}

--smooth-corners: X[, Y]

  • X - Float, Curvature of the X axis
  • Y - Float, Curvature of the Y axis (optional, defaults to X axis)
Shapes by X value
  • 0.6 - Astroid
  • < 1 - Concave rhombus
  • = 1 - Rhombus
  • > 1 and < 2 - Convex rhombus
  • = 2 - Circle
  • > 2 - Rounded rectangles
  • 2.6 - KakaoTalk profile icon
  • 4.0 - Squircle
  • 5.0 - iOS app icon
.mask {
  --smooth-corners: 3;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257; /* So you can see it */

Registering the Paint Worklet

Register the Paint Worklet to the distributed path of paint.js.

Register with a CDN (preferred)

Use any CDN that serves packages from the NPM registry, for example:

  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('')

Register with a file path

Download paint.js or install with npm install smooth-corners

// src/assets/paint.js
import 'smooth-corners' // ES Modules
// src/assets/paint.js
require('smooth-corners') // CommonJS

Like Web Workers, the Paint Worklet API requests the module path in the browser during runtime and must be a seperate entryfile. This is not the path to the source code location.

  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')


2 examples: A rounded pink square and a pink squircle

Package Sidebar


npm i smooth-corners

Weekly Downloads






Unpacked Size

9.58 kB

Total Files


Last publish


  • wopian