Using corner-shape Lets You Create Shapes That border-radius Could Not

corner-shape is an experimental CSS property that changes the rounded corners of border-radius to different profiles. Now you can create octagons, hexagons, triangles, and more by "just slightly angling the corners" while maintaining borders and shadows without using clip-path.

First, a Mini Glossary

• border-radius: A property that rounds the corners of a box.
• clip-path: A feature that clips only the visible part of an element (like "cutting out" with a mask).
• mask: A feature that hides and reveals with a specific shape (like a stencil).
• corner-shape: Applies a different corner profile instead of roundness (e.g., bevel, notch, etc.).
• bevel: A corner "cut" at a straight diagonal.
• scoop: A concave corner "scooped" inward.
• notch: A groove-like shape where the corner is angularly "carved out".
• squircle: A smooth curve between a square and a circle (square + circle).
• aspect-ratio: The width:height ratio of an element.

Why corner-shape Instead of clip-path?

When you create polygons with clip-path, borders and box-shadows do not follow nicely, making management cumbersome. In contrast, corner-shape changes the shape of the corner itself, so borders and shadows naturally follow along, making it easier to maintain consistent design.

Quick Comparison

• clip-path: Shapes are flexible, but border/shadow handling is harder
• corner-shape: Only changes corners, cleaner code, borders/shadows OK

⚠️ Support Status: This is still experimental and currently only works experimentally in Chrome (with Flags), etc. When using in projects, please prepare a fallback strategy.

Basic Usage

.corner {
  border-radius: 30px; /* corner radius */
  corner-shape: round | scoop | bevel | notch | squircle;
}

• round (default): The rounded corners we know
• scoop: A concave scooped-out feel
• bevel: Slightly cut at a diagonal
• notch: Angular groove
• squircle: A smooth curve between square and circle

The Core Idea of Shape Drawing

The point is to use % with border-radius and combine it with corner-shape. This allows you to create various shapes with very little code.

1) Octagon

.octagon {
    width: 150px;
    height: 150px;
    background: #70a9ff;
    border-radius: calc(100% / (2 + sqrt(2)));
    corner-shape: bevel;
    aspect-ratio: 1;
}

If the formula seems overwhelming, substituting about 29% works similarly.

2) Rhombus (Diamond)

.rhombus {
    width: 150px;
    height: 150px;
    background: #70a9ff;
    border-radius: 50%;
    corner-shape: bevel;
    aspect-ratio: 1;
}

3) Hexagon

border-radius can have separate horizontal/vertical values divided by a slash(/).

.hexagon {
    width: 150px;
    height: 150px;
    background: #70a9ff;
    border-radius: 50% / 25%;
    corner-shape: bevel;
    aspect-ratio: cos(30deg); /* maintains proportions */
}

4) Triangles

By making some corners 0, you "kill" the corners to create a triangle.

.triangle {
    width: 200px;
    height: 150px;
    background: #70a9ff;
    border-radius: 50% / 100% 100% 0 0;
    corner-shape: bevel;
}

Try mixing ratios and aspect-ratio to vary the direction.

5) Slanted Edge

Using absolute values like pixels keeps the slant width fixed even as the element grows.

.slanted {
    width: 200px;
    height: 150px;
    background: #70a9ff;
    border-top-right-radius: 80px 100%;
    corner-shape: bevel;
}

6) Arrow-like Box

.arrow {
    border-radius: 80px / 0 50% 50% 0;
    corner-shape: bevel;
    width: 200px;
    height: 100px;
    background: #70a9ff;
}

7) Trapezoid

.trapezoid {
    width: 200px;
    height: 150px;
    background: #70a9ff;
    border-radius: 80px / 100% 0 100% 0;
    corner-shape: bevel;
}

8) Parallelogram

 .parallelogram {
    width: 180px;
    height: 200px;
    background: #70a9ff;
    border-radius: 80px / 100% 100% 0 0;
    corner-shape: bevel;
 }

• Simplified Syntax: Easier to write/modify than clip-path polygons.
• Borders & Shadows OK: Decorations naturally follow the corners.
• Responsive Shapes: Look good even with size changes using % based radii.
• Mix Corners: Different profiles possible for each corner.

.mix {
  border-radius: 48px;
  /* Order: top-left, top-right, bottom-right, bottom-left */
  corner-shape: bevel round notch scoop;
}

corner-shape is still new, but it allows you to easily create shapes that previously required complex formulas or SVG with a single property. Next time you need a polygon, before reaching for clip-path out of habit, try corner-shape first. Your code will be more concise, and borders/shadows will stay clean. `--

• When deploying to production, use progressive enhancement: apply effects only to supporting browsers, while unsupported browsers safely fall back to default rounded corners.
• In design systems, tokenize (radius and profile values) so the entire team can reuse consistent shapes.

/* Basic */
.box { border-radius: 24px; corner-shape: bevel; }

/* Different corner for each */
.fun { border-radius: 40px; corner-shape: scoop bevel notch round; }

/* Responsive card */
.card { aspect-ratio: 4 / 3; border-radius: 8% / 12%; corner-shape: squircle; }

Share the creative shapes you have made with corner-shape with the community. Small experiments change the design language ✨