Corner Smoothing: CSS vs Lisse

Compare the same size, radius, and color across three corner treatments. The CSS example uses this site’s Tailwind utility, which sets native corner-shape: squircle. Lisse uses a different curve, so equal radius values do not guarantee identical outlines.

Compare the corners

Size176 px

Radius48 px

Lisse smoothing60%

Smoothing changes only Lisse. At 0%, it uses circular corners.

Your browser supports native CSS squircles.Your browser does not support corner-shape: squircle. The CSS example below shows ordinary rounded corners instead.

Rounded corners

Circular corner arcs.

border-radius: 48px;

CSS squircle

Native corner shape via Tailwind.

border-radius: 48px;
corner-shape: squircle;

Lisse

Figma-style smoothing through a path.

generateClipPath(176, 176, {
  radius: 48,
  smoothing: 0.60,
  curve: "squircle",
  preserveSmoothing: false,
});

All samples keep their pixel dimensions as you resize the page. The radius is capped at half the size. Lisse preserves that radius here and reduces smoothing if there is too little edge space, so large radii can make the smoothing control less noticeable.

What changes?

Differences between rounded corners, CSS squircles, and Lisse
Feature	Rounded corners	CSS squircle	Lisse
Corner curve	Circular arc	Superellipse-based squircle	Figma-style curve with smooth shoulders and a central arc
Controls	Radius	Radius and corner-shape; squircle is a fixed curve	Radius and a smoothing amount from 0 to 1
Rendering in this demo	CSS border-radius	CSS border-radius + corner-shape	A generated SVG path applied through CSS clip-path
Browser support	Widely supported	Requires corner-shape support; otherwise falls back to rounded corners	Requires clip-path: path(); does not depend on corner-shape
Borders and shadows	Handled by CSS	Follow the corner shape in supporting browsers	Clipping alone is insufficient; use Lisse’s effect APIs or wrappers

Explore further

Use native CSS when the browser’s corner curve fits your design and rounded corners are an acceptable fallback. Read the corner-shape documentation for its behavior and current browser compatibility.

Use Lisse when you want Figma-style smoothing with an adjustable amount. This experiment imports only its DOM-free path generator; the library also offers components and APIs for borders and shadows. See the Lisse repository for the full library.