Elk's cool border-radius trick

Elk is an alternative front-end for Mastodon. It is maintained by members of the Nuxt.js core team.

I've been using Elk in Firefox for a few weeks now, and something that caught my eye with the UI is the unique border-radius effect around the avatar.

My elk profle, and a single toot: "Anyone playing Street Fighter 6 today?"

I noticed the shape isn't quite a square with its corners rounded, and it also has its sides stretched outward slightly. This is a pattern you start to see everywhere when you use Apple products. It's baked into every corner on the physical devices, and the app icons themselves.

Turns out, this shape is commonly referred to as a "squircle".

Image taken from the scribe.rip article linked above

Back to Elk

Inspecting the code around my avatar reveals the image is wrapped in a div and there it is - the cute selector we'd expect to see - .squircle.

And here's the CSS

.squircle {
  -webkit-clip-path: url(#avatar-mask);
  clip-path: url(#avatar-mask);
}

So, the unique border-radius effect isn't achieved with just regular CSS, but in fact uses an SVG image as a clip-path. From the MDN Web Docs:

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Again using the Firefox dev tools to search the DOM for the string "avatar-mask" - we can see the following mark-up. An inline SVG with no width or height, defs element, clipPath with an ID attribute, and and the path element which presumably contains the coordinates to map out the shape we end up seeing as the fancy border.

<svg absolute="" op0="" width="0" height="0">
  <defs>
      <clipPath id="avatar-mask" clipPathUnits="objectBoundingBox">
          <path d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"></path>
      </clipPath>
  </defs>
</svg>

There's a good run-down and demo on how clip-path works on mdn web docs.

The element is used to store graphical objects that will be used at a later time. - MDN Web Docs

Below is an example from my home-page, where I have used @supports to provide a regular border-radius fallback for browsers that don't support clip-path.

.homepage-hero__avatar img {
  border-radius: 50%;
  width: 100%;
}

@supports (clip-path: url(#avatar-mask)) {
  .homepage-hero__avatar  {
    clip-path: url(#avatar-mask);
  }
  .homepage-hero__avatar img {
    border-radius: unset;
    width: unset;
  }
}

And yep, after investigating the squircle idea, I had to use it for my own site.

However, you could also create your own custom shapes and use them as clip paths using Sketch or Figma. Export the SVG to a file, open it in an editor, and change out the <path> attributes and selector names accordingly.

Finally, I thought it was kinda tricky to recreate the squircle myself in Figma, so I did some DuckDuckGo'ing and found this app called Squircley!

Anyway, I thought it was cool 😅

XOXO MG