CSS Clip-Path Shape() Based Squircle.md

CSS Clip-Path Shape() Based Squircle

Pure CSS Squircle has always been the fantasy of a web developer's good night's sleep. It is possible to clip a div with a custom SVG, but you have to make that SVG, put it on top of your HTML, then reference it inside the CSS, and regenerate it on each resize... It is a nightmare and the performance is horrible. You can go mad and implement a CSS Houdini to render squircle..., while this is mind-blowingly awesome, it doesn't work in Safari, and still not Pure CSS (my nightmare for those who disable JavaScript on their clients...). While there is work underway to add the superellipse() to CSS, the shape() function is now supported on all major browsers (not on every user, they will take ages to update their stuff), but still, it is available and you can use this code to have that effect in your website. You're welcome 🥰

.squircle {
    --squircle-displacement:
        25pt;

    clip-path: shape(
      from 0 var(--squircle-displacement),
      curve to var(--squircle-displacement) 0 with 0 0 / 0 0,
      hline to calc(100% - var(--squircle-displacement)),
      curve to 100% var(--squircle-displacement) with 100% 0 / 100% 0,
      vline to calc(100% - var(--squircle-displacement)),
      curve to calc(100% - var(--squircle-displacement)) 100% with 100% 100% / 100% 100%,
      hline to var(--squircle-displacement),
      curve to 0 calc(100% - var(--squircle-displacement)) with 0 100% / 0 100%,
      close
    );
}