A New Way to Shape Elements
CSS shaping has come a long way recently. First came the shape() function, now Baseline, which brings SVG-style syntax to clip-path and offset-path. Then corner-shape appeared, working alongside border-radius to control how element corners are drawn using keywords like scoop and squircle. These are interesting, but both have limits: shape() still relies on clipping or masking, and corner-shape only touches corners.
Enter border-shape. This property shapes an entire element, accepting the same values as clip-path—including shape(). The key difference is in how the borders and other decorations are treated. Clipping and masking remove everything outside the shape, including borders. border-shape, on the other hand, lets decorative properties like border, box-shadow, and outline follow the shape's contour instead of the element's original box.
Understanding the Syntax
From the specification, border-shape accepts either one or two <basic-shape> values:
Single <basic-shape> (Stroke mode): The border is rendered as a stroke along the shape's path, with the stroke width determined by the relevant side's computed border width. This mode is useful for creating outlined shapes.
Two <basic-shape>s (Fill mode): The border is rendered as the area between the two paths. The first shape defines the outer boundary, and the second shape defines the inner boundary. This mode provides precise control over the border region's geometry.
The single-value mode makes border-only shapes straightforward istead of relying on hacks. The well-known trick of overlapping shapes or using drop shadows to simulate outlines is no longer needed. Since the border follows the shape path, a single declaration can produce the outline effect.
The two-value fill mode is where things get interesting. By specifying an outer and inner shape, you can create filler areas within the original boundary between the paths. Using a rectangle as the outer shape with an inner shape cuts out the middle, transforming a border-only shape into a cutout version. Choose any shape you want for the inner cutout. Need a triangular cutout inside a square? Simply swap the inner value.
Note that border-radius doesn't apply here; the element is fully defined by the border-shape value, so any corner rounding would be meaningless.
Beyond the Box
The novel capability is using the area between two shapes to create decorations that would otherwise demand complex workarounds. You can quickly add varied shapes to your layout that extend beyond typical boundaries, building breakout effects. If the desired effect requires going beyond the average rectangular shape, defining the range of border-shape to include the surrounding space will handle it. Since content within the element remains unchanged—clipped or hidden only with overflow: hidden, which is often disregarded — the decoration can form background effects that extend to the viewport's edge while content stays in place.
These approaches carry over to one-value shapes, too. Using an extreme basic shape value pulls decorative elements outside the standard boundary cases, adding to what is possible.
Partial Decorations and Animation
The two-value syntax can also position various decorations, or create limited amounts of highlight inside an area. Border-area rendering can be placed anywhere and scaled to any size, enabling animation to transform sections rather than the whole object.
Hover effects reveal that distinct shape states between the outer and inner boundaries can be animated directly with CSS transitions or keyframes. Passing animation through a shape’s own coordinate structure also creates dynamic effects, replaying like bouncing blobs or reflowing lines.
The property applies to media as well, so image elements can trigger hover animations from extended boundary regions.
Shape From shapes
The value of border-shape extends to the many basic shapes in CSS. Switching a clip-path with a complex shape() code block over to border-shape yields faithful outlines and similarly animated elements.
More decorative patterns, such as hand-drawn underlines or a linked sequence of circles that advances upon interaction, are all functional from updates to CSS specs. As some browsers complete rollouts, expect to implement element treatment without losing out on features offered by older versions.
Support is Chromium-only for now, so be sure to check the current demos in Chrome. It's an exciting space to explore once the engine catches up.
Why border-shape Changes the CSS Shapes Game
The border-shape property is shaping up to be a genuine game-changer for front-end development. While shape() and corner-shape already simplified how we build geometric elements, border-shape pushes things significantly further. It doesn’t just help you draw a shape; it brings borders, cutouts, and decorations into the same declarative workflow.
What makes this property so compelling is its ability to collapse what used to require complex SVG masks, multiple pseudo-elements, or pre-generated clip-paths into a single CSS declaration. For the first time, the edge itself becomes the design element, not just the container.
Borders Without the Box
With border-shape, you can create full border-only shapes that exist independently of any filled background. This enables everything from minimal frame designs to complex outer rings that don’t require an inner element to mask against. It effectively turns the border model on its head: instead of a rectangle with the border drawn on its perimeter, you get a border that follows a custom outline perfectly, whether that be a circle, an arc, or a complex polygon.
Cutouts and Partial Decorations
Beyond simple outlines, the property shines when you need to carve shapes out of edges. Instead of stacking elements to simulate a notch or gap, you can define the clip directly in the border-shape declaration. This makes it trivial to build segmented rings, pie charts, or progress indicators without relying on canvas or external libraries.
The real creative potential arrives with partial decorations. Because the border is now a first-class shape, you aren’t limited to drawing a full loop around an element. You can specifiy decorative arcs that highlight specific portions of an element, creating focus states or aesthetic accents that are purely CSS. This gives designers the ability to add distinct visual flourishes without touching the document markup.
Animation is a Supported Citizen
The power of border-shape extends directly into motion design. Since these shapes are CSS-native, they are primed for animation. You can transition between different shape configurations, morphing an element’s outline from a simple star to a complex flower, or interpolating the border’s geometry to suggest rotation or depth.
This capability frees developers from hacky transform rotations or rebuilding elements frame-by-frame in JavaScript. The browser handles the heavy lifting, allowing for smooth transitions and continuous motion that aligns with the rendering engine’s native performance optimizations.
The Bottom Line
It is clear why this property is being called powerful. border-shape bridges the gap between static layout and dynamic illustration, offering a unified API for decorations that were previously inaccessible without heavy tooling. While the demos here only scratch the surface, understanding these basics prepares you for more complex applications down the road.
As the CSS Shapes ecosystem evolves, keep an eye on shape() and corner-shape as well; they are being increasingly adopted across collections and generators. border-shape is the natural next evolution in this family, allowing us to create complex outlines with the same ease we currently enjoy for boxes and backgrounds.
