CSS border-shape Can Draw Boxes clip-path Cannot

A clipped badge is easy enough until it needs a border that follows the cut edge. That’s the part I like about CSS border-shape : the border and box shadow can follow the shape itself.

clip-path can already describe the outline. The difference is how the box decorations follow it, rather than which silhouettes CSS can draw. border-shape is still experimental, so I would keep the shaped version optional.

Give CSS border-shape a real border

Start with a small badge:

<div class="badge">Badge</div>

.badge {
  width: 10rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #eef2ff;
  border: 4px solid #4338ca;
  border-shape: circle(50%);
}

The square proportions give the circle room to contain the label. In supporting browsers, the border follows the circular path instead of the rectangular box edge.

The border-shape specification calls a single-shape value “stroke mode”. The shape defines the path, and the border width determines the thickness of the stroke around it.

I like this arrangement because the border stays an ordinary CSS border. There is no second element whose only job is pretending to be the outside edge.

Clipping does not redraw the border

For comparison, replace the badge’s shape declaration with this rule:

.badge {
  border-shape: none;
  clip-path: circle(50%);
}

The clip-path property hides everything outside its clipping region. The rectangular border is painted around the original box, then clipped along with the rest of the element.

That leaves pieces of the original border; it does not create a continuous circular stroke. Changing the clipping region to a polygon has the same underlying problem.

A wrapper or an SVG can still be a reasonable solution. I would compare the complexity of the whole component before choosing a newer CSS property just to remove one element.

Use a polygon for a slanted card

The basic-shape syntax includes polygon() and circle(). It also accepts shape() commands and rectangle functions such as rect().

A polygon can give a card slanted sides:

<article class="card">
  <h2>A shaped callout</h2>
  <p>The border follows the slanted edge.</p>
</article>

.card {
  max-width: 24rem;
  padding: 2rem 3rem;
  background: #eef2ff;
  border: 3px solid #4338ca;
  border-shape: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

The percentages make the cut respond to the box dimensions. That also means a wide card loses more horizontal space to the slant than a narrow one.

I would check this with the actual heading and paragraph, rather than choosing padding from an empty shape. A tidy outline is less useful if the text runs into its edge.

Let the box shadow follow the outline

Add a shadow to the same card:

.card {
  box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.2);
}

MDN’s border-shape examples show that the border and box-shadow follow the defined shape. The shadow no longer has to describe a rectangle behind a slanted card.

CSS Tip has more examples of shaped boxes with decorations. The attraction for me is keeping the outline and its shadow together, rather than maintaining two approximations of the same geometry.

The content still uses a rectangular layout

The layout rules for border-shape leave the underlying rectangular box and content flow unchanged. Paragraphs do not automatically wrap inside the polygon’s outline.

The shaped border therefore needs enough padding for its content. Check long headings and translated text, especially if the shape removes a large part of either side.

For an interactive component, I would also check focus and pointer behaviour with the actual shape. The border alone is not enough evidence that a decorative badge is ready to become a button.

Keep a rounded card as the fallback

MDN lists border-shape as experimental and not Baseline . Start with a usable card, then apply the polygon only when the browser accepts it:

.card {
  max-width: 24rem;
  padding: 2rem 3rem;
  background: #eef2ff;
  border: 3px solid #4338ca;
  border-radius: 1rem;
}

@supports (border-shape: polygon(10% 0, 100% 0, 90% 100%, 0 100%)) {
  .card {
    border-radius: 0;
    border-shape: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  }
}

Use this as the complete card stylesheet instead of the earlier demonstration rules. Supporting browsers get the slanted border, while browsers without support keep the rounded card.

The feature query checks the polygon used by the component. I would keep that check close to the enhanced declaration, so the fallback remains easy to see when changing the design.

Keep clip-path when clipping is the requirement

A reveal effect or an image crop can still be a good use of clip-path. Its job is to decide which painted parts remain visible, and its browser support is broader than this experimental property.

I would leave working clipping code alone when a shaped border adds nothing to the design. For a border or shadow that needs to follow a custom outline, border-shape is the more interesting experiment.

A speech bubble or occasional callout is a reasonable place to try it with a plain fallback. I would start there before making every card on a site depend on an unusual silhouette.

← Back to all articles