zan0

Appearance

Corner Shape ​

2026.01.11#lessons

In 2026, did you know you can control border radius in more than just a rounded manner ? Below are a few side by side comparisons of what the new corner-shape property with values of bevel, notch, swoop, squircle looks like on an element with border-radius: 10px and height & value of 100px. The last item in the list below doesn't use corner-shape to give us a default comparison.

Bevel
Notch
Scoop
Squircle
css
.corner-shape-example {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  corner-shape: <bevel, notch, scoop, squircle>;
  background-color: <pastel-color>;
}

Bevel ​

corner-shape: bevel - Makes a 45 degree straight edge out of the corners, offers an easy way of making an octagon.

Notch ​

corner-shape: notch - Removes a square shaped piece out of the corners of your element.

Scoop ​

corner-shape: scoop - Creates an inwards swooping cut out.

Squircle ​

corner-shape: squircle - Makes rounded corners but in a way that is in between a circle and square. This can make the shape look something reminiscent of phone app icons.

Regular ​

This example is doesn't use any corner-shape attribute but instead gives a comparision. Hotice that the second element looks almost completely like a circle.

Mixed ​

One final detail is the fact that you can mix and match corners to use different types as seen here.

css
corner-shape: scoop notch squircle bevel;

~ zan0