CSS outline-width Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS outline-width property showing thin, medium, and thick outlines around a box
Definition

Definition and Usage

The outline-width property sets the thickness of an element’s outline. An outline is drawn outside the border and does not take up layout space.

Use a keyword (thin, medium, thick) or a length such as 2px. The initial value is medium, but the outline stays invisible until outline-style is a visible style such as solid. Pair width with style and outline-color, or use the outline shorthand.

Baseline · Widely available.

Not deprecated. Keywords and length values are standard-track and widely supported. The newer hairline keyword from CSS Borders Level 4 is still limited — prefer 1px or thin in production for now.

Syntax

CSS Syntax

syntax.css
outline-width: thin | medium | thick | <length> | initial | inherit;
Values

Property Values

ValueDescriptionTry it
thinThin line. Typically about 1pxTry it
mediumDefault thickness. Typically about 3pxTry it
thickThick line. Typically about 5pxTry it
<length>Exact size such as 4px or 0.25emTry it
initialResets to the initial value, mediumTry it
inheritTakes the value from the parent elementTry it
Approach

How to Use outline-width

Set a visible outline style first, then choose how thick the ring should be.

  1. Set outline-style to something visible, such as solid.
  2. Set outline-width to a keyword or length.
  3. Optionally set outline-color, or use the outline shorthand for width, style, and color together.
  4. Add outline-offset if you want a gap between the border and the outline.
PieceRequired?Role
Visible styleYes (to show)Without a style other than none, nothing paints
Width valueYesKeyword or length. medium is the initial
ColorOptionalDefaults to currentColor if omitted
OffsetOptionalMoves the outline away from the border edge
Try it

Live Preview

The box already has a solid blue outline. Change only outline-width.

Style and color stay fixed. Only the width changes. The thin gray border is the element edge; the outline sits outside it.

Box

outline-width: 4px

Code

CSS Examples

Each snippet focuses on outline-width. Style and color are only there so the line can show. Use Try It Yourself for a live editor.

Example 1 — Exact Pixel Width

Set a precise outline thickness with a length.

CSS
<style>
  div {
    outline-width: 4px;
    outline-style: solid;
    outline-color: #2563eb;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>4px outline</div>
Try It Yourself

How It Works

  1. Set the width. outline-width: 4px makes the outline four pixels thick.
  2. Give it a style. outline-style: solid draws the line. Without this, the default none hides the outline.
  3. Pick a color. Blue paints the stroke so the thickness is easy to see.
  4. Layout stays put. The gray border marks the box edge. The outline sits outside it and does not change size.

Example 2 — Thick Keyword

Use thick when you want a heavier ring without picking a pixel value.

CSS
<style>
  div {
    outline-width: thick;
    outline-style: solid;
    outline-color: #0f766e;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>Thick outline</div>
Try It Yourself

How It Works

  1. Use a keyword. thick is typically about 5px, depending on the browser.
  2. Keep style visible. solid still has to be set, or nothing draws.
  3. Color the ring. Teal makes the heavier stroke easy to compare with thinner examples.
  4. Same idea as thin and medium. Those keywords map to about 1px and 3px.

Example 3 — Relative em Width

Scale the outline with the element’s font size.

CSS
<style>
  div {
    font-size: 16px;
    outline-width: 0.25em;
    outline-style: solid;
    outline-color: #7c3aed;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>0.25em outline</div>
Try It Yourself

How It Works

  1. Set a font size. font-size: 16px is the base for em.
  2. Use a relative width. 0.25em becomes 4px here (0.25 × 16).
  3. Keep style and color. Solid purple shows the scaled ring clearly.
  4. Change the font, change the outline. If the font size grows, the outline grows with it.

Edge Cases & Pitfalls

If the outline disappears or looks wrong, check these first.

style

Width alone does not draw

The default outline-style is none. Set a visible style such as solid, or use the outline shorthand with a style keyword.

layout

Thicker outlines do not push content

Unlike border-width, growing an outline never changes the element’s size. Neighbors stay put even with 8px or thick.

double

double shares the total width

With outline-style: double, both lines and the gap between them use the same outline-width. A thin width can look like a single line — try 6px or more.

a11y

Keep focus rings thick enough

Very thin outlines are easy to miss. For keyboard focus, prefer at least about 2px with clear contrast, often with a small outline-offset.

hairline

hairline is still limited

The newer hairline keyword means a just-visible line of 1px or less. Prefer 1px or thin until support is universal.

Compatibility

Browser Support

outline-width is a browser CSS property for outline thickness. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

outline-width

Supported in Chrome 4+, Firefox 2+, Safari 3.1+, Edge 12+, and Internet Explorer 8+. Keywords thin, medium, and thick are widely available.

97% Global browser support
Google Chrome 4+
Full support
Mozilla Firefox 2+
Full support
Apple Safari 3.1+
Full support
Microsoft Edge 12+
Full support
Opera 15+ (Chromium)
Full support
Samsung Internet 4+
Full support
Internet Explorer 8+
Full support
outline-width Widely supported

Bottom line: Safe for focus and emphasis styling in current browsers. Remember that a visible outline-style is still required. It is not a runtime API.

Remember

Key Takeaways

  • Role: sets how thick the outline is around an element.
  • Initial value: medium. Still needs a visible outline-style to show.
  • Values: thin, medium, thick, or any non-negative length.
  • No layout shift: thicker outlines never change the element’s size.

One line: set a visible style first, then choose the width — width alone stays invisible.

Frequently Asked Questions

It sets how thick an element's outline is, using keywords such as thin, medium, and thick, or a length such as 2px. The outline sits outside the border and does not change layout.
The initial value is medium, which is typically about 3px. The outline still stays invisible until outline-style is a visible style such as solid.
outline-style defaults to none. Set a visible style first, or use the outline shorthand with a style keyword. A width alone is not enough.
No. Outlines are drawn outside the border box and never take up space, so neighboring content does not shift when the outline grows thicker.
They accept similar keywords and lengths, but outline-width never changes the box model. border-width is part of the element's size.
It is Baseline Widely available: Chrome 4+, Firefox 2+, Safari 3.1+, Edge 12+, and Internet Explorer 8+. It is a browser CSS property, not a Node.js feature.

Next: overflow

Learn how content behaves when it overflows its box.

overflow tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS outline-style Property CSS overflow Property