Playground de border-shape en CSS

Dibuja bordes no rectangulares con formas básicas y shape(), compara los modos de trazo y relleno y observa cómo el borde sigue la geometría.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Geometría del borde

Tipo de forma

Modo del borde

Con una forma, el borde se dibuja como un trazo centrado en el contorno. Con dos formas, el color del borde rellena el espacio entre el contorno exterior y el interior.

TrazoRelleno

Caja de referencia

Auto usa los valores iniciales de border-shape: half-border-box con una forma, y border-box más padding-box con dos formas.

Apariencia

border-color

background-color

Geometría CSS

El borde también puede tener forma

El contenido y el borde comparten un mismo contorno.

Este navegador aún no admite border-shape. La previsualización usa un fallback aproximado con clip-path; el borde con esa forma requiere soporte nativo.

HTML

<article class="border-shape" aria-labelledby="border-shape-title">
  <p>Geometría CSS</p>
  <h2 id="border-shape-title">El borde también puede tener forma</h2>
  <p>El contenido y el borde comparten un mismo contorno.</p>
</article>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<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>Geometría CSS</p>
  <h2 id="border-shape-title">El borde también puede tener forma</h2>
  <p>El contenido y el borde comparten un mismo contorno.</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;
  }
}