Smooth Corners

Superellipse masks using the CSS Houdini API

![Static demo of Smooth Corners][CTA]

Demo

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

Limitations

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

- The CSS Painting API Privacy Considerations section
- The CSS Painting API spec issue “CSS Paint API leaks browsing history”

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

``html



`

Usage

$3

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

#### Default (Squircle)

`css
.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

###### Example

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

$3

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:

- unpkg.com/smooth-corners
- cdn.jsdelivr.net/npm/smooth-corners/paint.js

`html

`

#### Register with a file path

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

`js
// src/assets/paint.js
import 'smooth-corners' // ES Modules
`

`js
// 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.

`html

``

$3

![2 examples: A rounded pink square and a pink squircle][Example]

[paint.js]:https://wopian.github.io/smooth-corners/paint.js
[Paint Worklet]:https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet
[CTA]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/cta.png
[Example]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/example.png
[Astroid]:https://en.wikipedia.org/wiki/Astroid