CSS corner-top-left-shape Property Explained

This article explores the proposed CSS corner-top-left-shape property, detailing how it works alongside border-radius to enable beveled, notched, and scooped corners without complex workarounds. You will learn about the limitations of existing border styling methods, the syntax and values introduced by the CSS Backgrounds and Borders Module Level 4 specification, and the current state of browser implementation.

The Limitation of border-radius

For years, web developers have relied on border-radius to soften the edges of boxes. While effective for rounded corners, border-radius only curves edges using circular or elliptical arcs. Creating non-rounded corners—such as chamfers (bevels), inward curves (scoops), or stepped rectangular cutouts (notches)—has traditionally required cumbersome workarounds. Developers have had to rely on complex clip-path: polygon() coordinates, SVG masks, or multiple pseudo-elements, all of which complicate maintainability, break standard border rendering, and hinder responsive scaling.

What is corner-top-left-shape?

The corner-top-left-shape property is part of the CSS Backgrounds and Borders Module Level 4 proposal developed by the W3C CSS Working Group. It allows authors to alter the geometry of a specific corner of an element.

Rather than replacing border-radius, the corner-shape properties are designed to work directly in tandem with it. The border-radius property defines the dimensions (width and height) of the corner transition area, while corner-top-left-shape defines the mathematical path drawn within that allocated space.

Proposed Syntax and Values

The property targets the top-left corner individually, alongside its counterparts for the other three corners (corner-top-right-shape, corner-bottom-right-shape, and corner-bottom-left-shape), as well as a shorthand property simply named corner-shape.

The primary values proposed for corner-top-left-shape include:

  • round: The default behavior. It draws a traditional convex arc identical to standard border-radius.
  • bevel (or angle): Cuts the corner off in a straight diagonal line connecting the endpoints of the radius, creating a chamfered edge.
  • scoop: Inverts the curve inward, producing a concave quarter-circle cutout.
  • notch: Creates a stepped, rectangular cutout following the horizontal and vertical bounds of the radius area.

Implementation Example

To create a container with a beveled top-left corner, you define both the size of the corner cut using border-top-left-radius and the geometric style using corner-top-left-shape:

.card {
  /* Defines the size of the corner */
  border-top-left-radius: 20px;

  /* Defines the shape of the corner */
  corner-top-left-shape: bevel;

  /* Standard styling remains intact */
  background-color: #f4f4f4;
  border: 2px solid #333;
}

Because it interacts natively with CSS borders, borders and outlines will follow the contour of the bevel or notch automatically, eliminating the rendering flaws common with CSS clipping masks.

Current Specification and Support Status

As of now, corner-top-left-shape remains in the working draft stage within the W3C CSS Working Group. It is not yet supported natively in production web browsers. Until browser engines ship native implementations, modern alternatives such as clip-path with CSS variables or Houdini Paint APIs remain the primary solutions for rendering non-rounded container corners in production environments.