Published: 27 Jun
2025
5-min read
Table of Contents
INTRODUCTION
The outline-width property sets the thickness (width) of an element's outline. An outline is a line which is drawn around an element and is outside the border. It works together with outline-style and outline-color to define the complete outline around an element.
Possible values
The outline-width property can be specified in the following types.
- [length] - Any CSS length units like rem, em, px etc.
- Keyword Values
- thin - The exact width is determined by the browser, but it's typically around 1px on desktop browsers.
- medium - The exact width is determined by the browser, but it's typically around 3px on desktop browsers.
- thick - The exact width is determined by the browser, but it's typically around 5px on desktop browsers.
When outline: none; is used, it remove the outline from an element entirely. The outline-width property computed value is 0
outline-width: thin | medium | thick | [length];
outline-width: 5px; /* length unit */
outline-width: thin; /* keyword value */
Frequently Asked Questions (FAQ)
What are the default values for outline-width?
What's the difference between thin, medium, and thick in outline-width?
| Keyword | Approximate Thickness | Notes |
|---|---|---|
| thin | ~1px | Smallest visible outline |
| medium | ~3px (default) | Default thickness used by browsers |
| thick | ~5px | Thickest preset outline |
These values are not exact, as they depend slightly on the browser and device resolution. They offer a simple way to apply consistent outline widths without needing to specify pixels.
Why is my outline-width not showing?
1. No outline-style Set (or set to none) - outline-width has no effect unless a visible outline-style is defined.
2. Outline Color is Transparent or Same as Background
3. Outline Overridden by Browser Styles - Some browsers have built-in styles for outlines that may override or conflict with yours. Use browser dev tools to inspect the actual computed styles.
4. Element Not Focused If you're applying outlines only on :focus, make sure the element is actually focused