CSS corner-shape Property

CSS corner-shape lets you change the geometry of corners created with border-radius. Instead of being limited to ordinary rounded corners, supported browsers can create shapes such as scoop, bevel, notch, square, and squircle.

The property is part of newer CSS borders and box-decoration work and is still a limited-availability feature, so it should be used as progressive enhancement.

Basic Syntax

.card {
  border-radius: 30px;
  corner-shape: scoop;
}

The property changes the shape inside the area established by border-radius.

If the effective border radius is zero, corner-shape has no visible effect.

Available Keyword Shapes

Common keyword values include:

• round - the normal rounded-corner behavior.
• scoop - creates inward, concave corners.
• bevel - cuts the corner with a straight edge.
• notch - creates a notched corner shape.
• square - produces square corner geometry.
• squircle - creates a curve between a circle-like corner and a square.

Compare Several Corner Shapes

Example:

<div class="card scoop">Scoop</div>
<div class="card bevel">Bevel</div>
<div class="card squircle">Squircle</div>

<style>
.card {
  width: 150px;
  height: 100px;
  border-radius: 28px;
}

.scoop {
  corner-shape: scoop;
}

.bevel {
  corner-shape: bevel;
}

.squircle {
  corner-shape: squircle;
}
</style>

Use Different Shapes on Different Corners

Like border-radius, the shorthand can accept multiple values.

.panel {
  border-radius: 32px;
  corner-shape: scoop bevel;
}

With two values, the first applies to the top-left and bottom-right corners, while the second applies to the top-right and bottom-left corners.

Four-Corner Syntax

.panel {
  border-radius: 30px;
  corner-shape:
    scoop
    bevel
    squircle
    notch;
}

The four values follow the usual clockwise order: top-left, top-right, bottom-right, and bottom-left.

Custom Shapes with superellipse()

The superellipse() function provides finer control over corner curvature.

.badge {
  border-radius: 36px;
  corner-shape: superellipse(2);
}

Several keyword values are defined in terms of equivalent superellipse curves.

Properties That Follow the Shape

Visual properties such as backgrounds, borders, outlines, box shadows, and clipping behavior can follow the shaped corner. This makes it possible to build cards and badges that look intentionally sculpted rather than simply masked.

Animate Corner Shapes

Compatible corner shapes can interpolate because their geometry maps to superellipse values.

.card {
  border-radius: 30px;
  corner-shape: round;
  transition: corner-shape 300ms ease;
}

.card:hover {
  corner-shape: squircle;
}

Browser support should be checked carefully before making the effect essential to interaction.

Progressive Enhancement

.card {
  border-radius: 24px;
}

@supports (corner-shape: scoop) {
  .card {
    corner-shape: scoop;
  }
}

Browsers without support still display a normal rounded card.

Common Mistakes

• Forgetting border-radius: the corner shape needs a radius area to affect.
• Assuming universal support: the property is still limited in some major browsers.
• Using decorative shapes for essential affordances: unsupported browsers should still have a usable interface.
• Overusing mixed corner shapes: unusual combinations can reduce visual consistency.

Logical Corner Properties

CSS also defines logical corner-shape properties for writing-mode-aware layouts. These let a design target block-start, block-end, inline-start, and inline-end corners instead of physical top-left and bottom-right positions.

Logical properties are useful in multilingual interfaces where text direction or writing mode can change.

Accessibility Considerations

Decorative corner geometry should not reduce focus visibility or make buttons harder to recognize. Test keyboard focus outlines, high-contrast modes, zoom, and touch targets after applying unusual shapes.

When the property is unsupported, the fallback should preserve the same meaning, spacing, and interactive behavior rather than relying on the shaped corner to communicate state.

This makes the property suitable for optional visual polish rather than essential layout logic.

Conclusion

corner-shape expands CSS corner design beyond ordinary rounded rectangles. It can create scooped, beveled, notched, square, and squircle corners while preserving familiar border and background styling. Use it progressively and keep border-radius as the fallback foundation.