CSS Houdini experimental showcase by @iamvdo
Support: Chrome/Opera/Edge
I wrote a blog post explaining the whole process for this one.
Note: Squircle: N=4, iOS icons: N=5
.el {
background: ...;
border-radius: 70px;
}
@supports (mask-image: paint(smooth-corners)) {
.el.is-loaded {
border-radius: 0;
mask-image: paint(smooth-corners);
--smooth-corners: 4;
}
}