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">outline</div>

CSS

.outline {
  min-inline-size: min(100%, 18rem);
  min-block-size: 12rem;
  outline: 6px dashed #9ec6f3;
  outline-offset: 8px;
}