Whoa, that's so

monoco

Smooth squircle corners for HTML elements

Monoco is a tiny JavaScript library that adds squircles (smooth corners) and other corner types to html elements.

regular rounded

smooth squircle

round inverse

flat

inset

custom

type
squircle
smoothing
width
height
top-l
top-r
btm-r
btm-l
offset
border 1
border 2
clip
filter
background
container bg
debug

How does it work?

Regular CSS borders are round by default, and that's the only option available until CSS Houdini will be cross-browser supported. However, UX/UI designers are often in search for more expressive shapes. For example, Figma supports squircles natively.

Monoco works by generating dynamic SVG code based on parameters of your choosing and setting that as a CSS background image or clip path. As such, it's compatible with all modern browsers.

Monoco keeps track of element dimensions and makes sure it redraws the corners when they change.

Download monoco

It's available in the following contexts: