CSS Outline Generator

Generate CSS outline code instantly. Adjust style, width, color, and offset — see the live preview update in real time, then copy the ready-to-use CSS.

Presets

Controls

<!-- outline-style -->
<div class="ot-control-group">
  <label for="ot-style">outline-style</label>
  <select id="ot-style">
    <option value="solid" selected>solid</option>
    <option value="dashed">dashed</option>
    <option value="dotted">dotted</option>
    <option value="double">double</option>
    <option value="groove">groove</option>
    <option value="ridge">ridge</option>
    <option value="inset">inset</option>
    <option value="outset">outset</option>
  </select>
</div>

<!-- outline-width -->
<div class="ot-control-group">
  <label for="ot-width">outline-width <span class="ot-val" id="ot-width-val">3px</span></label>
  <input type="range" id="ot-width" min="1" max="20" value="3" step="1">
</div>

<!-- outline-color -->
<div class="ot-control-group">
  <label for="ot-color">outline-color</label>
  <div class="ot-color-row">
    <input type="color" id="ot-color" value="#4f46e5">
    <input type="text" class="ot-hex-input" id="ot-hex" value="#4f46e5" maxlength="9" spellcheck="false">
  </div>
</div>

<!-- outline-offset -->
<div class="ot-control-group">
  <label for="ot-offset">outline-offset <span class="ot-val" id="ot-offset-val">3px</span></label>
  <input type="range" id="ot-offset" min="-20" max="20" value="3" step="1">
</div>

<!-- compare with border toggle -->
<label class="ot-toggle-row">
  <span class="ot-toggle">
    <input type="checkbox" id="ot-compare">
    <span class="ot-toggle-track"></span>
    <span class="ot-toggle-thumb"></span>
  </span>
  Compare with border
</label>

<!-- focus state toggle -->
<label class="ot-toggle-row">
  <span class="ot-toggle">
    <input type="checkbox" id="ot-focus-mode">
    <span class="ot-toggle-track"></span>
    <span class="ot-toggle-thumb"></span>
  </span>
  Focus state preview
</label>

<!-- Preview -->
<div class="ot-preview-wrap">
  <p class="ot-section-title">Live Preview</p>
  <div class="ot-preview-stage" id="ot-stage">
    <div>
      <div class="ot-preview-box" id="ot-box-outline">
        Outline
        <span class="ot-label">outline</span>
      </div>
    </div>
    <div id="ot-border-col" style="display:none">
      <div class="ot-preview-box" id="ot-box-border">
        Border
        <span class="ot-label">border</span>
      </div>
    </div>
    <div id="ot-focus-col" style="display:none" class="ot-focus-demo">
      <button class="ot-focus-btn" id="ot-focus-btn">Focus me</button>
      <span class="ot-focus-label">Tab to focus</span>
    </div>
  </div>
</div>

<!-- CSS Output -->
<div class="ot-output-wrap">
  <div class="ot-output-header">
    <p class="ot-section-title" style="margin:0">CSS Output</p>
    <button class="ot-copy-btn" id="ot-copy-btn">
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <rect x="5" y="5" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
        <path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      Copy CSS
    </button>
  </div>
  <pre class="ot-code" id="ot-code-out"></pre>
</div>

<!-- Accessibility / Focus State Output -->
<div class="ot-a11y-wrap" id="ot-a11y-wrap">
  <div class="ot-output-header">
    <p class="ot-section-title" style="margin:0">Focus State CSS (Accessibility)</p>
    <button class="ot-copy-btn" id="ot-copy-a11y-btn">
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <rect x="5" y="5" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
        <path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      Copy
    </button>
  </div>
  <p class="ot-a11y-note">Use <code>:focus-visible</code> for keyboard-only focus rings (WCAG 2.4.11 recommendation). Minimum 3:1 contrast ratio required.</p>
  <pre class="ot-code-a11y" id="ot-a11y-out"></pre>
</div>

<div class="ot-info">
  <strong>Tip:</strong> Unlike <code>border</code>, <code>outline</code> does not affect layout — it draws outside the element without shifting surrounding content. Use <code>outline-offset</code> to create a gap between element and outline.
</div>

How to Use

Choose an outline-style from the dropdown — solid, dashed, dotted, double, and more.
Drag outline-width to set thickness (1–20 px).
Pick an outline-color from the color picker or type a hex value.
Adjust outline-offset to push the outline away from (or inside) the element boundary.
Enable Compare with border to see the layout difference side by side.
Enable Focus state preview to see how the outline looks as a focus ring.
Click Copy CSS to copy the generated code.

Outline vs. Border — Key Differences

Property	Affects layout	Follows border-radius	Offset support
`outline`	No	Partially	Yes (`outline-offset`)
`border`	Yes	Yes	No

Because outline does not affect layout, it is ideal for focus indicators — adding a visible ring around focused elements without causing content reflow.

Accessibility Tips

WCAG 2.4.11 (AA, WCAG 2.2) requires focus indicators to have a contrast ratio of at least 3:1 against adjacent colors.
Use :focus-visible instead of :focus to show rings only for keyboard navigation, not mouse clicks.
outline-offset of 2–4 px improves legibility on rounded elements.
Never use outline: none without providing an alternative focus style.

How to Use#

Outline vs. Border — Key Differences#

Accessibility Tips#

Related Tools#

How to Use

Outline vs. Border — Key Differences

Accessibility Tips

Related Tools