Playground de outline en CSS

Explora outline con controles para ancho, estilo, color y desplazamiento, cambia entre px y rem y genera el CSS con shorthand o propiedades separadas.

outline

HTML

<div class="outline"></div>

Tailwind CSS

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

<div class="inline-[250px] block-[250px] bg-slate-900 outline-6 outline-dashed outline-[#9ec6f3] outline-offset-8"></div>

CSS

.outline {
  inline-size: 250px;
  block-size: 250px;
  outline: 6px dashed #9ec6f3;
  outline-offset: 8px;
  background-color: #0f172a;
}