Back to Examples

CSS Corner Shapes Tutorial

Learn how to create rounded, notched, beveled, and scooped corners using border-radius, clip-path, CSS masks, and the new corner-shape property.

Classic Border Radius

The border-radius property is the foundation of corner styling in CSS. It supports individual corner values and can create elliptical curves.

border-radius: 16px
Rounded

Standard rounded corners using a single radius value applied to all corners.

border-radius: 40px 16px 40px 16px
Asymmetric

Different radius values for each corner create unique asymmetric shapes.

border-radius: 9999px
Pill

A very large radius value creates a pill or stadium shape.

border-radius: 50% / 60% 60% 40% 40%
Elliptical

Use "/" to specify different horizontal and vertical radii for organic shapes.

.rounded { border-radius: 16px; }
.asymmetric { border-radius: 40px 16px 40px 16px; }
.pill { border-radius: 9999px; }
.elliptical { border-radius: 50% / 60% 60% 40% 40%; }

Clip-Path Corner Cuts

The clip-path property with polygon() creates precise geometric corner cuts like notches and bevels that aren't possible with border-radius alone.

clip-path: polygon(...)
Notched

45-degree angled cuts at each corner using clip-path polygon coordinates.

Single corner notch
Single Notch

Combine clip-path with border-radius for selective corner treatment.

Top corners beveled
Beveled

Beveled corners on specific sides only for tab-like appearances.

Radial gradient mask
Ticket

Circular cutouts using radial gradient masks create ticket-style edges.

.notched {
  --notch: 16px;
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0,
    100% var(--notch), 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, var(--notch) 100%,
    0 calc(100% - var(--notch)), 0 var(--notch)
  );
}

Scooped Corners (Inverted Radius)

Scooped or concave corners require CSS masks with radial gradients since border-radius only creates convex curves.

mask: radial-gradient(...)
Scooped

All corners scooped inward using radial gradient masks at each corner.

Gradient + asymmetric radius
Mixed

Combining gradients with asymmetric border-radius for creative effects.

.scooped {
  --scoop: 20px;
  mask: 
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #fff) top left,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #fff) top right,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #fff) bottom left,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #fff) bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

CSS corner-shape Property (Experimental)

The new corner-shape CSS property provides native support for different corner styles without complex workarounds. Works with border-radius to define the corner curve type.

corner-shape: round
Round

Default circular arc corners (same as standard border-radius behavior).

corner-shape: scoop
Scoop

Inverted/concave corners that curve inward instead of outward.

corner-shape: notch
Notch

Straight diagonal cuts at the corner with the radius as the cut depth.

corner-shape: bevel
Bevel

Chamfered corners with a flat angled edge at 45 degrees.

corner-shape: squircle
Squircle

Superellipse curves (iOS-style) that blend smoothly into straight edges.

.scoop { border-radius: 24px; corner-shape: scoop; }
.notch { border-radius: 16px; corner-shape: notch; }
.bevel { border-radius: 16px; corner-shape: bevel; }
.squircle { border-radius: 24px; corner-shape: squircle; }

Creative corner-shape Combinations

Future CSS: These examples show what will be possible using only corner-shape with different border-radius values per corner. Currently displays as regular rounded corners until browsers implement support.

corner-shape: scoop _ _ scoop
ADMIT ONE

Ticket stub effect with scooped left corners for punch-hole appearance.

corner-shape: notch _ _ notch
$19.99

Price tag style with notched left corners for a pointed edge look.

corner-shape: scoop (all)
50% OFF

Coupon style with all corners scooped inward.

corner-shape: squircle
PRO

iOS-style app icon badge using squircle for smooth curves.

corner-shape: notch notch _ _
Tab

Tab navigation style with notched top and rounded bottom corners.

corner-shape: bevel bevel _ _
Card

Card with beveled top corners for a chamfered header effect.

Mixed: scoop, round, notch, round
Creative

Asymmetric design mixing different corner shapes for unique look.

corner-shape: _ _ _ scoop
Hello!

Speech bubble style with one scooped corner as a tail indicator.

/* Ticket - scoop left corners */
.ticket {
  border-radius: 30px 8px 8px 30px;
  corner-shape: scoop round round scoop;
}

/* Price Tag - bevel right corners */
.price-tag {
  height: 80px;
  border-radius: 16px 40px 40px 16px;
  corner-shape: round bevel bevel round;
}

/* Badge - squircle all corners */
.badge {
  border-radius: 22px;
  corner-shape: squircle;
}

/* Tab - notch top, round bottom */
.tab {
  border-radius: 16px 16px 8px 8px;
  corner-shape: notch notch round round;
}

/* Asymmetric mix */
.creative {
  border-radius: 30px 8px 30px 8px;
  corner-shape: scoop round notch round;
}