A tiny CSS Houdini module that allows adding a squircle shape to HTML elements.
π» Demo on GitHub Pages
πΎ Codepen examples
π¦ NPM package
π Medium article
The property controls the roundness of the corners. You can provide 1, 2, 3 or 4 values, similar to padding/margin in CSS. The order is clockwise: top left, top right, bottom right, bottom left
- Syntax:
<px>
OR<px px>
OR<px px px>
OR<px px px px>
- Defaul value:
8px
(if no radius at all is defined) OR:0
(if only some radii are defined) - Min/Max values:
β
(the radii are capped at half of the shorter side of width/ height)
--squircle-radius-top-left, --squircle-radius-top-right, --squircle-radius-bottom-right, --squircle-radius-bottom-left
Set radii for the corners individually
The property controls the length of bezier guide lines. Could be defined by --squircle-ratio
.
- Syntax:
<number>
- Defaul value:
1
- Min/Max values:
0.1 / 1
The property controls squircle outline. There are two methods how too use it with background-mask
and mask
+:pseudo-element
. to find out more check codepen examples.
- Syntax:
<px>
- Defaul value:
β
- Min/Max values:
β
The property accepts any color, including variables.
background: paint(squircle);
. For mask-image: paint(squircle);
use background
property.
- Syntax:
<color>
- Defaul value:
#f45
- Min/Max values:
β
This property makes the squircle radius visually the same as the standart border-radius
.
- Syntax:
<px>
- Defaul value:
1.8
- Min/Max values:
β
In order to make squircle works you need to register the module somewere as a JS script.
// latest version
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
);
}
</script>
// or particular version
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle@0.2.2/squircle.min.js"
);
}
</script>
npm i css-houdini-squircle
You can download the min version of the module from UNPKG
// latest version
https://www.unpkg.com/browse/css-houdini-squircle/squircle.min.js
In order to get the module work on other browsers, you can use Paint Worklets polyfill.
// use with polifill example
<script>
(async function () {
if (!("paintWorklet" in CSS)) {
await import("css-paint-polyfill");
}
CSS.paintWorklet.addModule(
`https://www.unpkg.com/css-houdini-squircle/squircle.min.js`
);
})();
</script>
- Animation support