Focus Ring Tester

Outline · box-shadow focus style preview

Outline width (px)

Outline offset (px)

Outline color

solid

dashed

dotted

Add box-shadow ring

Tab into the controls below to see the focus ring.

CSS

:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Verify outputs before using in production. No warranty — see Terms.