CSS border-shape

CSS border-shape

border-shape controls the geometry of a box’s border independently from its corner radii. Combined with border-radius for sizing and inset/outset direction, it lets you create squircles, superellipses, notches, scoops, and bevels in pure CSS.

.card {
  border-radius: 1.5rem;
  border-shape: squircle;
}

No SVG clip-paths, no clip-path: path() strings — a single keyword reshapes the entire border.

Shape Keywords

/* Default rectangle with rounded corners */
border-shape: round;

/* iOS-style squircle — smooth corner tangency */
border-shape: squircle;

/* Superellipse — adjustable between round and squircle */
border-shape: superellipse;

/* Notch — concave corner cut */
border-shape: notch;

/* Scoop — concave inward curve */
border-shape: scoop;

/* Bevel — straight diagonal cut */
border-shape: bevel;

/* Hard 90° corners regardless of border-radius */
border-shape: square;

Inset vs Outset

Each shape keyword can be modified with inset or outset to flip the curve direction:

/* Concave notch cut inward */
.chip {
  border-radius: 0.75rem;
  border-shape: notch inset;
}

/* Convex bump outward */
.badge {
  border-radius: 0.75rem;
  border-shape: notch outset;
}

inset pulls the border geometry inward; outset pushes it outward from the corner radius anchor.

Superellipse with Custom Exponent

superellipse accepts an optional exponent controlling the curve between a rounded rectangle (exponent 2) and a squircle (exponent ~4–5):

.container {
  border-radius: 2rem;
  border-shape: superellipse(4); /* closer to squircle */
}

.pill {
  border-radius: 2rem;
  border-shape: superellipse(2.5); /* slightly softer than round */
}

Higher exponents produce flatter sides with sharper corner transitions.

Combining with padding and background-clip

.card {
  border-radius: 1.5rem;
  border-shape: squircle;
  border: 2px solid oklch(70% 0.15 250);
  background-clip: padding-box;
  padding: 1.5rem;
}

background-clip respects the shaped border geometry, so the background fills exactly the squircle interior.

Making Any Shape

Keyword	Curve type	Use case
round	Circular arc	Standard rounded box
squircle	Lamé curve ~4	App icons, iOS UI
superellipse(n)	Lamé curve n	Custom softness
notch	Concave cut	Chip badges, tabs
scoop	Concave arc	Floating action buttons
bevel	Straight diagonal	Futuristic UI, game UI
square	No curve	Overrides border-radius

With clip-path

border-shape also influences clip-path: shape() when set to shape(from border-box), making the shape reusable as a clip:

.avatar {
  border-radius: 30%;
  border-shape: squircle;
  clip-path: shape(from border-box);
}

Feature Detection

@supports (border-shape: squircle) {
  .card {
    border-shape: squircle;
  }
}

border-shape is in active development in Chrome Canary and is part of the CSS Borders Level 5 specification.

---