Loading...

CSS Outline

You can already draw a border. Outline is a related tool with a different job: it draws a ring outside the border box and — unlike border — does not take up layout space. Neighbors do not move when you add an outline.

Outline versus border

Keep these two tools separate in your mental map.

📊 Outline vs border

Feature Outline Border
Layout space Does not take space; size of the box stays the same Takes space; can grow the border box
Typical place Outside the border edge Around the padding
Common use Focus rings, temporary emphasis Permanent UI edges and card frames
Part of box model size math No Yes (with default content-box sizing)

A simple outline

Style, width, and color work much like border — but the ring sits outside.

Basic outline

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

Outline shorthand

The familiar trio works: width, style, and color. Style is required for the outline to show — outline: 2px #000 alone is not enough.

Outline shorthand

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

Common outline styles

Solid, dashed, and dotted are everyday choices. outline: none removes the ring — use that carefully (see focus below).

Outline style samples

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — push the ring outward

outline-offset moves the outline away from the border edge without changing layout size. Positive values push out; negative values pull inward.

Outline with offset

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Same look, different layout cost

Two boxes can look similar, but only border changes how much room the element occupies.

Border grows; outline does not

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Both look bold; .with-border occupies more layout width */

Focus-friendly habit

Browsers often use outline (or a similar ring) to show keyboard focus. Do not set outline: none on everything. If you restyle focus, provide a clear replacement ring so keyboard users still see where they are.

Keep a visible focus ring

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

Try it yourself

  1. Give a padded box a border and a thicker outline — notice neighbors stay put.
  2. Switch the outline style between solid, dashed, and dotted.
  3. Add outline-offset: 8px and watch the ring float outward.
  4. Compare .with-border and .with-outline side by side — same visual weight, different layout width.
  5. Style :focus-visible on a button instead of removing outlines globally.

Common mistakes

  • Treating outline like border when calculating layout width (outline does not add size)
  • Using outline: none on all elements and forgetting a focus replacement
  • Expecting outline to push neighbors away (that is margin or border’s job)
  • Writing width and color without a style (solid / dashed / …)
  • Confusing outline with the box-model layers you just learned

Summary

  • Outline draws outside the border and does not take layout space
  • Shorthand uses width, style, and color — style is required
  • outline-offset moves the ring without changing box size
  • Border is for permanent edges; outline suits focus and temporary rings
  • Keep a visible focus outline (or an equal replacement) for keyboard users

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial