Monoco is a tiny JavaScript library that adds squircles (smooth corners) and other corner types to html elements.
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: