CSS border-shape playground

Draw non-rectangular borders with basic shapes and shape(), compare stroke and fill modes, and see the border follow the geometry.

Presets

Choose a configuration as a starting point, then adjust any control.

Border geometry

Shape type

Border mode

With one shape, the border is stroked around the contour. With two shapes, the border color fills the space between the outer and inner contours.

StrokeFill

Reference box

Auto uses the border-shape defaults: half-border-box for one shape, and border-box plus padding-box for two shapes.

Appearance

border-color

background-color

CSS geometry

The border can have a shape, too

Content and border share the same contour.

This browser does not support border-shape yet. The preview uses an approximate clip-path fallback; a shaped border requires native support.

HTML

<article class="border-shape" aria-labelledby="border-shape-title">
  <p>CSS geometry</p>
  <h2 id="border-shape-title">The border can have a shape, too</h2>
  <p>Content and border share the same contour.</p>
</article>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<article class="box-border w-full max-w-[28rem] min-h-[18rem] p-12 text-center [background-color:#172033] border-[7px] border-solid [border-color:#f97316] text-slate-50 [clip-path:polygon(2%_2%,_calc(100%_-_2%)_2%,_calc(100%_-_2%)_calc(100%_-_2%_-_24px),_calc(62%_+_24px)_calc(100%_-_2%_-_24px),_62%_calc(100%_-_2%),_calc(62%_-_24px)_calc(100%_-_2%_-_24px),_2%_calc(100%_-_2%_-_24px))_border-box] supports-[border-shape:circle(50%)]:[clip-path:none] supports-[border-shape:circle(50%)]:[border-shape:shape(_from_calc(2%_+_17px)_2%,_hline_to_calc(100%_-_2%_-_17px),_curve_to_calc(100%_-_2%)_calc(2%_+_17px)_with_calc(100%_-_2%)_2%,_vline_to_calc(100%_-_2%_-_24px_-_17px),_curve_to_calc(100%_-_2%_-_17px)_calc(100%_-_2%_-_24px)_with_calc(100%_-_2%)_calc(100%_-_2%_-_24px),_hline_to_calc(62%_+_24px),_line_to_62%_calc(100%_-_2%),_line_to_calc(62%_-_24px)_calc(100%_-_2%_-_24px),_hline_to_calc(2%_+_17px),_curve_to_2%_calc(100%_-_2%_-_24px_-_17px)_with_2%_calc(100%_-_2%_-_24px),_vline_to_calc(2%_+_17px),_curve_to_calc(2%_+_17px)_2%_with_2%_2%,_close_)_border-box]" aria-labelledby="border-shape-title">
  <p>CSS geometry</p>
  <h2 id="border-shape-title">The border can have a shape, too</h2>
  <p>Content and border share the same contour.</p>
</article>

CSS

@supports (border-shape: circle(50%)) {
  .border-shape {
    border-shape: shape(
      from calc(2% + 17px) 2%,
      hline to calc(100% - 2% - 17px),
      curve to calc(100% - 2%) calc(2% + 17px) with calc(100% - 2%) 2%,
      vline to calc(100% - 2% - 24px - 17px),
      curve to calc(100% - 2% - 17px) calc(100% - 2% - 24px) with calc(100% - 2%) calc(100% - 2% - 24px),
      hline to calc(62% + 24px),
      line to 62% calc(100% - 2%),
      line to calc(62% - 24px) calc(100% - 2% - 24px),
      hline to calc(2% + 17px),
      curve to 2% calc(100% - 2% - 24px - 17px) with 2% calc(100% - 2% - 24px),
      vline to calc(2% + 17px),
      curve to calc(2% + 17px) 2% with 2% 2%,
      close
    ) border-box;
  }
}

.border-shape {
  box-sizing: border-box;
  inline-size: min(100%, 28rem);
  min-block-size: 18rem;
  padding: 3rem;
  text-align: center;
  background-color: #172033;
  border: 7px solid #f97316;
  color: #f8fafc;
}

@supports not (border-shape: circle(50%)) {
  .border-shape {
    clip-path: polygon(2% 2%, calc(100% - 2%) 2%, calc(100% - 2%) calc(100% - 2% - 24px), calc(62% + 24px) calc(100% - 2% - 24px), 62% calc(100% - 2%), calc(62% - 24px) calc(100% - 2% - 24px), 2% calc(100% - 2% - 24px)) border-box;
  }
}

.border-shape {
  @supports (border-shape: circle(50%)) {
    border-shape: shape(
      from calc(2% + 17px) 2%,
      hline to calc(100% - 2% - 17px),
      curve to calc(100% - 2%) calc(2% + 17px) with calc(100% - 2%) 2%,
      vline to calc(100% - 2% - 24px - 17px),
      curve to calc(100% - 2% - 17px) calc(100% - 2% - 24px) with calc(100% - 2%) calc(100% - 2% - 24px),
      hline to calc(62% + 24px),
      line to 62% calc(100% - 2%),
      line to calc(62% - 24px) calc(100% - 2% - 24px),
      hline to calc(2% + 17px),
      curve to 2% calc(100% - 2% - 24px - 17px) with 2% calc(100% - 2% - 24px),
      vline to calc(2% + 17px),
      curve to calc(2% + 17px) 2% with 2% 2%,
      close
    ) border-box;
  }

  box-sizing: border-box;
  inline-size: min(100%, 28rem);
  min-block-size: 18rem;
  padding: 3rem;
  text-align: center;
  background-color: #172033;
  border: 7px solid #f97316;
  color: #f8fafc;

  @supports not (border-shape: circle(50%)) {
    clip-path: polygon(2% 2%, calc(100% - 2%) 2%, calc(100% - 2%) calc(100% - 2% - 24px), calc(62% + 24px) calc(100% - 2% - 24px), 62% calc(100% - 2%), calc(62% - 24px) calc(100% - 2% - 24px), 2% calc(100% - 2% - 24px)) border-box;
  }
}