CSS Tutorial
CSS Outline
Outline draws outside the border and does not change layout. Keep a visible focus outline.
Outline is not a border
outline paints a line around a box. It sits outside the border. It does not take up space. Neighboring boxes do not move when you add or thicken an outline. That is the difference from border, which is part of the box model and changes layout.
| Border | Outline | |
|---|---|---|
| Sits | Between padding and margin | Outside the border |
| Changes width | Yes | No |
| Per-side values | Yes (border-left) | No — one ring |
| Typical job | Visible card edge | Focus and emphasis |
Example
<style>
.card {
display: inline-block;
padding: 12px 16px;
margin: 12px;
background: #e0f2fe;
color: #0c4a6e;
border: 2px solid teal;
}
.lit {
outline: 4px solid #0284c7;
}
</style>
<span class="card">Harbor studio</span>
<span class="card lit">Harbor studio — outlined</span>Both cards keep the same width. The second one draws a sky ring around the teal border without shoving the first card aside.
Width, style, and color
The shorthand is outline: width style color, the same order as border. You can also setoutline-width, outline-style, and outline-color separately. Style must not be none or the outline is invisible even if you set a width.
Example
<style>
p {
padding: 12px;
background: #f0f9ff;
color: #0c4a6e;
border: 1px solid #7dd3fc;
}
.solid {
outline: 3px solid teal;
}
.dashed {
outline: 3px dashed #0284c7;
}
</style>
<p class="solid">Solid outline on the booking note.</p>
<p class="dashed">Dashed outline on the kiln log.</p>outline: none removes the ring. That is useful only when you replace it with another visible focus style. Never leave a keyboard user with no cue.
outline-offset
outline-offset pushes the ring away from the border. A positive value leaves a gap. A negative value pulls the ring inward over the padding. Offset does not change layout either — it only moves the paint.
Example
<style>
.badge {
display: inline-block;
padding: 10px 18px;
background: teal;
color: white;
border: 2px solid #0f766e;
outline: 3px solid #0284c7;
outline-offset: 6px;
}
</style>
<span class="badge">Harbor studio open</span>Offset is handy when a thick outline would cover a tight border-radius. Give the ring a few pixels of air so the corner still reads as a pill.
Keep a visible focus outline
Browsers draw an outline on the element that has keyboard focus — usually a link, button, or input. That ring is how someone tabbing through Harbor studio’s booking form knows where they are. If you restyle focus, keep contrast and a clear shape.
Example
<style>
a {
color: teal;
}
a:focus {
outline: 3px solid #0284c7;
outline-offset: 3px;
background: #e0f2fe;
}
</style>
<p>
Tab to the
<a href="#hours">Harbor studio hours</a>
link, then look for the sky ring.
</p>outline: none on :focus with no replacement fails accessibility checks. Hover is not enough: hover needs a pointer. Keyboard and switch users never hover.
When to use outline instead of border
Use a border when the edge is part of the design every day — a card, a table cell, a button. Use an outline when you need a temporary ring that must not shift the layout: focus, a selected tile, or a “this field has an error” highlight that should not reflow the form.
Next: text. Alignment, decoration, and line-height style the letters inside the content box you have been measuring.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Engineering
Focus that does not shove the layout
outline draws outside the border and does not take up flow space. That is why it is the right tool for :focus. A border on focus would jitter the page.
Never outline: none without a replacement. Keyboard users need to see where they are. 3px solid on the button is the minimum kindness.
Example
<style>
button:focus { outline: 3px solid #0ea5e9; outline-offset: 2px; }
</style>
<button type="button">Record 0.45 A</button>Biology
Offset so the ring does not hide the label
outline-offset pushes the ring out. On a tight chip, a 0 offset ring sits on the text. 4px of air is a clinic form that still looks calm.
Example
<style>
a { outline: 2px solid #166534; outline-offset: 4px; }
</style>
<p><a href="/css">Clinic home</a></p>