johannesmutter / squircle-houdini-css

A tiny CSS Houdini module that allows to add a squircle shape to HTML elements

Squircle CSS Houdini

A tiny CSS Houdini module that allows adding a squircle shape to HTML elements.

---

🎻  Demo on GitHub Pages

👾  Codepen examples

📦  NPM package

🗞  Medium article

---

🎛  Custom CSS Properties

--squircle-radius

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

---

--squircle-smooth

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

---

--squircle-outline

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: —

---

--squircle-fill

The property accepts any color, including variables.

⚠️ Work only with background: paint(squircle);. For mask-image: paint(squircle); use background property.

• Syntax: <color>
• Defaul value: #f45
• Min/Max values: —

---

--squircle-ratio: <number>

This property makes the squircle radius visually the same as the standart border-radius.

• Syntax: <px>
• Defaul value: 1.8
• Min/Max values: —

---

🕹  How to install

In order to make squircle works you need to register the module somewere as a JS script.

Use via external link

// 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>

Install via NPM

npm i css-houdini-squircle

Download

You can download the min version of the module from UNPKG

// latest version
https://www.unpkg.com/browse/css-houdini-squircle/squircle.min.js

---

✨  Use css-paint-polyfill

In order to get the module work on other browsers, you can use Paint Worklets polyfill.

⚠️ Check for artefacts before deploying.

// 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>

---

🚬  TO-DO

• Animation support