CSS border-shape Is Coming and It Fixes a Long-Standing Shape Problem

Three CSS shape-related features have been landing in browsers in quick succession: the shape() function, the corner-shape property, and now a proposal for border-shape. Each one addresses a different layer of the same problem, so it helps to understand how they fit together.

Quick Background on shape() and corner-shape

The shape() function is a new value for clip-path and offset-path that uses SVG-style syntax to define shapes directly in CSS. It has reached Baseline status. The corner-shape property works alongside border-radius and accepts keyword values that control the geometry of an element’s corners. Current browser support for corner-shape is limited to Chromium-based browsers.

The key advantage corner-shape already demonstrates is that decorative properties such as border and box-shadow follow the shaped corner rather than the element’s rectangular box. That behavior is the foundation for what border-shape extends further.

What border-shape Does Differently

The core problem with using clip-path or mask to create shapes is that both techniques clip the entire element, including any borders, outlines, or shadows applied to it. The result is that adding a visible border to a clipped shape is effectively impossible without resorting to workarounds.

border-shape approaches this differently. Instead of clipping the element, it reshapes it while allowing decorative properties to follow that shape. The syntax mirrors clip-path closely, so developers already familiar with that property have very little new to learn.

.shape {
  /* Old approach */
  clip-path: polygon(...);

  /* New approach */
  border-shape: polygon(...);
}

Two Operating Modes

According to the specification, border-shape accepts either one or two shape values:

• Single shape (Stroke mode): The border renders as a stroke along the shape’s path, with width determined by the computed border-width. This is the straightforward way to produce an outlined shape with no fill.
• Two shapes (Fill mode): The border renders as the area between an outer boundary and an inner boundary. This makes cutout shapes practical. For example, passing inset(0) as the outer shape and a custom shape as the inner produces a cutout effect inside a rectangle, or swapping inset(0) for circle() places the cutout inside a circle.

One behavioral note worth flagging: border-radius is ignored when border-shape is in use, since corner rounding becomes irrelevant once the element has an arbitrary shape. Any rounding effect needs to be expressed through the shape value itself.

Browser Support and Practical Status

As of publication, border-shape is Chrome-only and should be considered experimental. It is not yet suitable for production use, but it is far enough along to experiment with and understand its potential. Developers building tools or component libraries around CSS shapes will want to follow its progress closely, since it directly addresses the border limitation that has made complex CSS shapes impractical for real-world use.