How CSS corner-shape Expands Border-Radius

The CSS corner-shape property proposal introduces advanced geometric control to web design, expanding styling capabilities far beyond standard circular curves. While the traditional border-radius property is limited to circular and elliptical arcs, corner-shape works alongside it to define alternative corner geometries, including chamfers, scoops, and notches. This article explores the core differences between these properties, how they interact, the proposed shape values, and how corner-shape simplifies modern UI development without requiring complex workarounds like SVGs or clip paths.

The Limitation of border-radius

For years, border-radius has been the primary tool for softening element edges. However, its mathematical foundation is strictly limited to quarter-ellipses. When a developer applies a border-radius, the browser calculates a curve based on horizontal and vertical radii, always resulting in a convex arc.

Achieving non-rounded corners—such as beveled edges for futuristic interfaces, inverted curves for tickets, or rectangular cutouts for decorative tags—previously required fragile solutions. Developers relied on CSS clip-path, linear-gradient masks, or pre-rendered SVG assets, all of which complicate border rendering, box-shadow application, and responsive behavior.

How corner-shape Works with border-radius

The corner-shape property, proposed in the CSS Backgrounds and Borders Module Level 4, does not replace border-radius. Instead, it separates corner dimension from corner contour.

  • border-radius defines the size: It determines the bounding box or the horizontal and vertical reach of the corner effect.
  • corner-shape defines the path: It dictates the geometric curve or line drawn inside that defined corner boundary.

By decoupling the size of the corner from its geometric profile, CSS allows developers to apply different styles to corners while maintaining consistent sizing logic.

Proposed Values for corner-shape

The specification introduces several key values that transform how a corner transitions between two edges:

  • round: The default value. It preserves the classic behavior of border-radius, rendering standard convex circular or elliptical arcs.
  • angle: Creates a straight, diagonal cut (chamfer or bevel) connecting the boundary points established by border-radius.
  • scoop: Draws an inward, concave arc, creating a carved-out or notched circle aesthetic.
  • notch: Generates a stepped, rectangular cutout within the defined corner area.
  • squircle (or superellipse): Generates smooth, continuous curvature that eliminates the abrupt transition between straight edges and circular curves, often seen in modern mobile operating systems.

The property can also accept multiple values to style individual corners independently (top-left, top-right, bottom-right, bottom-left), mirroring the shorthand syntax of border-radius.

Key Advantages Over Previous Workarounds

  1. Native Border and Shadow Integration: Unlike clip-path: polygon(...), which cuts off standard CSS border and box-shadow effects, corner-shape natively integrates with the box model. Borders trace the new shape correctly, and drop shadows project accurately from the modified perimeter.
  2. Simplified Syntax: Creating a chamfered button requires only defining the corner depth with border-radius: 12px; and the shape with corner-shape: angle;, replacing verbose coordinate mapping in polygon() functions.
  3. Smooth Transitions and Animations: Because corner-shape operates within the standard CSS geometry engine, morphing between shapes (such as an angled corner transitioning to a scoop on :hover) becomes straightforward and performant.

The corner-shape property represents an evolution from basic rounded containers toward a comprehensive geometric styling system, giving developers full creative control over element silhouettes using clean, declarative CSS.