Borders and Decorations

Outline vs Border

Two buttons start identical, gain a 2px border, the primary thickens its border and shifts the row, then the secondary gains an outline that emphasizes it without changing layout.

Program

border and outline both draw a line around an element. border affects box dimensions; outline floats above the box and never changes layout.

outline_vs_border.html
Visuals: captured from real browser rendering
<style>
.actions { display: flex; gap: 12px; padding: 24px; }
.btn { padding: 10px 18px; font: inherit; font-weight: 800; border: 2px solid #0f766e; border-radius: 8px; background: white; color: #0f766e; }
.primary { border-width: 6px; }
.focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
</style>

<section class="actions">
  <button class="btn primary">Save</button>
  <button class="btn focus">Cancel</button>
</section>

  1. Lay the buttons out in a row.

    The two buttons sit side by side.
    A flex row keeps the buttons aligned with a fixed gap.

  2. Give both buttons a 2px border.

    Both buttons gain a thin teal border.
    A 2px border sits inside the same outline space.

  3. Thicken the primary border.

    The primary button grows wider; the cancel button shifts right.
    A thicker border increases the box size and pushes neighbors.

  4. Emphasize the cancel button with an outline.

    A blue ring floats around the cancel button without resizing it.
    outline lives outside the border box and never changes layout.
border border draws a line inside the element box and affects layout.
outline outline draws a line outside the border box without changing layout.