CSS outline playground

Explore outline with controls for width, style, color, and offset, switch between px and rem, and generate shorthand or separate-property CSS.

outline

HTML

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

Tailwind CSS

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

<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;
}