corner-smoothie

corner-smoothie

   

Create elements with Figma corner smoothing.

Live Demo

Usage

CSS Painting API (Recommended)

[!IMPORTANT] See Browser compatibility.

CSS.paintWorklet.addModule('<url-to-corner-smoothie-worklet>')

Using CDN (jsdelivr)

CSS.paintWorklet.addModule('https://cdn.jsdelivr.net/npm/corner-smoothie/dist/worklet.js')

Using Vite

import smoothieWorklet from 'corner-smoothie/worklet?url'

CSS.paintWorklet.addModule(smoothieWorklet)

Registering (Required)

[!NOTE] registerProperties relies on the CSS Properties and Values ​​API, which has different browser compatibility.

import { registerProperties } from 'corner-smoothie'

registerProperties()

CSS Declarations

.my-element {
  border-radius: 12px;
}

@supports (mask-image: paint(smoothie-mask)) {
  .my-element {
    --smoothie-border-radius: 12px;
    --smoothie-border-smoothing: 0.6;
    border-radius: 0;
    mask-image: paint(smoothie-mask);
  }
}

.my-element {
  background-color: cyan;
  border-radius: 12px;
}

@supports (background-image: paint(smoothie-background)) {
  .my-element {
    --smoothie-background-color: cyan;
    --smoothie-border-radius: 12px;
    --smoothie-border-smoothing: 0.6;
    background-color: transparent;
    border-radius: 0;
    background-image: paint(smoothie-background);
  }
}

The border-radius: 0 above can also be omitted, since smooth rounded corners are completely inside the tangent rounded corners.

Supported custom properties

• --smoothie-background-color: Alternative to background-color. Available in background mode.
• --smoothie-border-color: Alternative to border-color. Available in background mode.
• --smoothie-border-radius: Alternative to border-radius. Available in BOTH modes.
• --smoothie-border-radius-smoothing: A decimal between 0 and 1, aka ξ in Figma smoothing parameterized. The larger the value, the smoother the corners. Available in BOTH modes.
  • It is consistent with the iOS specification when specified as 0.6.
• --smoothie-border-width: Alternative to border-width. Available in background modes.

JS API

import { createMaskImage } from 'corner-smoothie'

const mask = createMaskImage(
  { width: 72, height: 72 },
  { borderRadius: 12, borderRadiusSmoothing: 0.6 },
)
element.style.maskImage = mask

import { createBackgroundImage } from 'corner-smoothie'

const background = createBackgroundImage(
  { width: 72, height: 72 },
  { borderRadius: 12, borderRadiusSmoothing: 0.6, backgroundColor: 'cyan' },
)
element.style.backgroundImage = background

JS API is especially useful for browsers that do not support the CSS Painting API such as Firefox. You can use ResizeObserver to have a similar experience to the CSS Painting API:

import { createMaskImage } from 'corner-smoothie'

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    if (entry.borderBoxSize.length) {
      entry.target.style.maskImage = createMaskImage({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize,
      }, {
        // Normally you can't use the CSS Typed OM API
        // because you only need to use the CSS Painting API in these browsers
        borderRadius: parseFloat(getComputedStyle(entry.target).getPropertyValue('--smoothie-border-radius')),
        borderRadiusSmoothing: 0.6,
      })
    }
  }
})

observer.observe(element)

Some older browsers may not support borderBoxSize, you may need to use contentRect instead.

Differences between mask and background

Feature	Mask	Background
Corner radius	✅	✅
Background image	✅	❌
Border	❌	✅
Overflow content	❌	✅