What Can We Actually Do With corner-shape?

corner-shape: More Than Just Rounded Corners

Rounded corners used to be a big deal. Before border-radius, achieving that effect meant wrestling with background images and sprites. Now, the visual language of the web has shifted again, embracing sharp angles and "squircle" shapes. The new corner-shape CSS property brings these modern aesthetics into the realm of simple, native code.

Currently supported in Chrome 139 and above, corner-shape works in conjunction with border-radius (or its individual component properties like border-top-left-radius). It lets you define not just the curve of a corner, but its entire shape.

Snipped And Slanted Corners With bevel

One of the most immediate applications is the snipped-corner look, a staple of brutalist and cyberpunk UI design. Achieving this is as simple as setting corner-shape: bevel and then using a standard border-radius value to control the size of the cut.

In this case, corner-shape: bevel creates the flat cut, while border-bottom-right-radius: 16px dictates how much of the corner is removed.

corner-shape: bevel;
border-bottom-right-radius: 16px;

This same principle can be expanded to create slanted sections. To do this, you need to understand that each corner radius has two axes: horizontal and vertical. A standard corner like 16px moves both points an equal distance from the corner, creating a symmetrical cut. For a slant, these values are different.

corner-shape: bevel;
border-bottom-right-radius: 100% 50px;

In the code above, the bevel is drawn from a point that travels 100% along the horizontal axis to a point that moves 50px along the vertical axis. The line drawn between these two points creates the angled edge. This same principle—using different values for horizontal and vertical axes—is what powers those popular border-radius "blobs."

Complex Shapes And Sale Tags

The corner-shape property truly shines when you mix different values to create more complex silhouettes, such as the classic e-commerce sale tag. You can combine shapes in a clockwise order (top-left, top-right, bottom-right, bottom-left), similar to border-radius.

To create the pointy tag at the top, you'd start with a declaration like corner-shape: round bevel bevel round. You can even mix multiple corner shapes and a full set of radius values. While you can omit values in some shorthand syntaxes, being explicit is clearer, especially with a more complex border-radius definition.

corner-shape: round bevel bevel round;
border-radius: 16px 48px 48px 16px / 16px 50% 50% 16px;

This notation contains horizontal-axis values on the left of the / and vertical-axis values on the right. The first and fifth values correspond to the same top-left corner, the second and sixth to the top-right corner, and so on. For clarity, you could write out this set of values in full:

border-top-left-radius: 16px;
border-top-right-radius: 48px 50%;
border-bottom-right-radius: 48px 50%;
border-bottom-left-radius: 16px;

In this setup, 16px shapes the round corners on the bottom, while 48px 50% defines the bevel for the top corners—moving 48px along the horizontal axis and a full 50% down the vertical axis, which creates the sharp point.

The same technique works for creating arrow "crumbs" in a navigation breadcrumb. Because direct borders and outlines can be tricky to render over the custom corner shapes, you can create fake borders by nesting identical shapes and using padding to let one element's background bleed into the next, simulating a separator line.

<nav>
  <ol>
    <li>
      <a>Step 1</a>
    </li>
    <li>
      <a>Step 2</a>
    </li>
    <li>
      <a>Step 3</a>
    </li>
  </ol>
</nav>

Tooltips With scoop

Changing the value to corner-shape: scoop inverts the corner to create an inward curve, which is perfect for tooltips. Combined with native CSS features like the Popover API and anchor positioning, you can build a fully functional tooltip where the caret is an intrinsic part of the element's box, rather than a separate pseudo-element.

The setup involves a spec-compliant popover element that is positioned relative to an anchor, with the tip styled using corner-shape: scoop. The result is a clean, self-contained component. If you prefer a classic triangular tooltip over the scooped one, you can simply switch the property back to bevel. For those who want to trigger tooltips on hover instead of click, you'll want to keep an eye on the upcoming Interest Invoker API.

Highlighting And Hand-Drawn Looks

The squircle value can make elements feel more modern and less "boxy." For instance, applying it to the <mark> element can transform the default static yellow highlight into something that looks like a more dynamic, hand-applied highlighter stroke, updating both the border-radius and corner-shape properties.

mark {
  /* A...squevel? */
  corner-shape: squircle bevel;
  border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;

  /* Prevents background-break when wrapping */
  box-decoration-break: clone;
}

The self-contained squircle value is also great for creating the appearance of modern app icons. You can also use this effect on your main UI elements like buttons and cards.

Larger squircles can give off a hand-drawn feel, though the effect might not scale up as beautifully for very large containers as it does on smaller components. For large-scale, high-impact effects reminiscent of a game's UI, a clever use of the border-image property is likely a stronger approach.

Clipping Backgrounds With notch

While the notch value might not be ideal for purely aesthetic reasons, it has a clever utility: clipping backgrounds. By setting the corner-shape to notch and then using a large radius value such as 50% on the relevant axis, you can effectively cut a piece out of an element's background. For example, to clip a 30px strip off the left side, you'd apply the notched radius to the -left-radius properties, defining 30px for the horizontal axis and 50% for the vertical axis.

corner-shape: notch;
border-top-left-radius: 30px 50%;
border-bottom-left-radius: 30px 50%;

corner-shape is a surprisingly versatile property. From beveled tags and arrow crumbs to scooped tooltips and squircle app icons, it offers a fresh toolkit for shaping elements without resorting to images or extra markup. As browser support expands, it's ripe for experimentation in modern web layouts.

For more fun exploration in CSS, here's a demo combining corner-shape with anchor positioning to make some geometry.