CSS Outline Width: Syntax, Values and Examples

CSS Outline Width

The CSS outline-width property controls the thickness of an outline drawn around an HTML element. It is commonly used to make buttons, links, form controls, and other interactive elements easier to identifyespecially when they receive keyboard focus.

Unlike a border, an outline does not occupy space in the CSS box model. It is drawn outside the elements border and normally does not change the elements size or move nearby content. According to MDN Web Docs, outline-width has been widely supported across major browsers for many years.

button {
  outline-style: solid;
  outline-width: 3px;
  outline-color: blue;
}

In this example, the button receives a solid blue outline that is 3px thick.

What Is an Outline in CSS?

An outline is a line drawn around the outside of an element. Developers often use outlines to:

Indicate keyboard focus.
Highlight selected elements.
Show validation states.
Debug page layouts.
Improve the visibility of interactive controls.
Create visual emphasis without affecting layout.

An outline can be controlled through four main CSS properties:

Property	Purpose
`outline-width`	Sets the thickness of the outline
`outline-style`	Sets the line style
`outline-color`	Sets the outline color
`outline-offset`	Sets the space between the outline and the element
`outline`	Shorthand for width, style, and color

The outline-width property controls only thickness. An outline generally remains invisible unless an outline style other than none is also applied.

.element {
  outline-width: 4px;
  outline-style: solid;
}

Basic Syntax

The basic syntax is:

selector {
  outline-width: value;
}

For example:

input {
  outline-width: 2px;
}

However, the declaration above may not produce a visible outline by itself. The initial value of outline-style is none. Therefore, you should also define an outline style:

input {
  outline-width: 2px;
  outline-style: solid;
  outline-color: green;
}

You can write the same design more briefly with the outline shorthand:

input {
  outline: 2px solid green;
}

Accepted Values

The outline-width property accepts keyword values, non-negative length values, and global CSS values.

Keyword values

CSS provides three standard width keywords:

outline-width: thin;
outline-width: medium;
outline-width: thick;

Value	Meaning
`thin`	Creates a relatively thin outline
`medium`	Creates a medium-width outline
`thick`	Creates a relatively thick outline

The exact thickness represented by these keywords is determined by the browser. Therefore, thin, medium, and thick should not be treated as exact pixel measurements.

Example:

.thin-example {
  outline: thin solid blue;
}

.medium-example {
  outline: medium solid green;
}

.thick-example {
  outline: thick solid red;
}

Length values

You can use a non-negative CSS length to control the outline more precisely:

outline-width: 1px;
outline-width: 0.2rem;
outline-width: 0.15em;
outline-width: 3pt;

Common units include:

Unit	Description
`px`	CSS pixels; useful for precise interface styling
`em`	Relative to the elements font size
`rem`	Relative to the root elements font size
`pt`	Points; used more often in print-oriented designs
`cm`, `mm`, `in`	Physical length units, rarely used for screen outlines

Example using pixels:

.card {
  outline: 4px solid #2563eb;
}

Example using a relative unit:

button:focus-visible {
  outline-width: 0.2em;
  outline-style: solid;
  outline-color: #7c3aed;
}

Relative units can allow the outline to scale with text or interface settings.

Zero value

A value of 0 produces an outline with no visible thickness:

.element {
  outline-width: 0;
}

Although this is valid, removing focus outlines can create serious usability problems for keyboard users.

Global CSS values

Like most CSS properties, outline-width accepts global values:

outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;

Value	Effect
`initial`	Restores the initial value, which is `medium`
`inherit`	Uses the computed value from the parent
`unset`	Acts like `initial` because `outline-width` is not inherited
`revert`	Restores the value from an earlier cascade origin
`revert-layer`	Restores the value from an earlier cascade layer

Formal Definition

The main technical characteristics of outline-width are:

Characteristic	Value
Initial value	`medium`
Applies to	All elements
Inherited	No
Percentage values	Not accepted
Negative values	Not accepted
Animation type	Length
Common computed result	An absolute length

The formal syntax can be represented as:

outline-width: <line-width>;

A <line-width> can be a supported keyword such as thin, medium, or thick, or a non-negative length.

How `outline-width` Works

The outline is normally painted outside an elements border. Its appearance depends on several related properties.

.notice {
  border: 2px solid #64748b;
  outline-width: 5px;
  outline-style: dashed;
  outline-color: #f97316;
}

In this example:

The border is 2px wide.
The outline is 5px wide.
The outline uses a dashed pattern.
The outline appears outside the border.

The outline does not normally increase the elements calculated width or height. It may overlap nearby content when insufficient visual space is available.

Outline Width with Different Styles

The perceived thickness of an outline can change according to its style.

.solid {
  outline: 6px solid blue;
}

.dashed {
  outline: 6px dashed green;
}

.dotted {
  outline: 6px dotted purple;
}

.double {
  outline: 6px double red;
}

With double, the declared width covers both visible lines and the gap between them. It does not give each line the full declared thickness.

Common outline styles include:

Style	Appearance
`solid`	One continuous line
`dotted`	A series of dots
`dashed`	A series of short line segments
`double`	Two parallel lines
`groove`	Appears carved into the surface
`ridge`	Appears raised from the surface
`inset`	Makes the element appear embedded
`outset`	Makes the element appear raised
`auto`	Lets the browser choose an appropriate style
`none`	Removes the visible outline

Using the `outline` Shorthand

In most projects, the shorthand property is the easiest way to create an outline:

button {
  outline: 3px solid navy;
}

The typical order is:

outline: width style color;

For example:

.card {
  outline: 5px dashed orange;
}

The order is flexible because the browser can normally recognize which value belongs to each outline component:

.card {
  outline: orange dashed 5px;
}

Nevertheless, writing the values as width, style, and color is often easier to read.

Adding Space with `outline-offset`

The outline-offset property controls the distance between the outline and the elements border edge.

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 4px;
}

Here:

outline-width: 3px controls thickness.
outline-offset: 4px creates a gap between the button and its outline.

A positive offset moves the outline farther away:

.element {
  outline: 2px solid red;
  outline-offset: 6px;
}

A negative offset moves it inward:

.element {
  outline: 2px solid red;
  outline-offset: -4px;
}

The outline-offset property changes position, not thickness. Its behavior is documented separately by MDN.

Outline Width and Keyboard Focus

One of the most important uses of outlines is to indicate keyboard focus.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

The :focus-visible pseudo-class usually applies a custom outline when the browser determines that a visible focus indicator is needed, such as during keyboard navigation.

A clear focus outline helps users understand which element will respond when they press Enter, Space, or another key.

Avoid removing focus outlines without a replacement

This code is generally harmful:

button:focus {
  outline: none;
}

It removes an important navigation indicator. If the default outline does not suit the design, replace it with another clearly visible focus style:

button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

The replacement should remain easy to see against surrounding colors.

Practical Examples

Button focus outline

<button class="save-button">Save Changes</button>

.save-button {
  padding: 10px 18px;
  color: white;
  background-color: #2563eb;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.save-button:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

The button receives a strong focus indicator without changing its layout.

Form input outline

<label for="email">Email address</label>
<input id="email" class="email-field" type="email">

.email-field {
  padding: 10px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
}

.email-field:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}

This design uses both a border color change and a wider outline to make the focused field noticeable.

Invalid form field

input:invalid:not(:placeholder-shown) {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

Color should not be the only method used to communicate an error. Add text explaining what the user needs to correct.

Selected card

.card[aria-selected="true"] {
  outline: 4px solid #7c3aed;
  outline-offset: 2px;
}

This pattern can visually identify a selected item in an interactive interface.

Debugging page layout

Developers sometimes add temporary outlines to inspect element boundaries:

* {
  outline: 1px solid rgba(255, 0, 0, 0.25);
}

Because outlines do not normally affect layout, they are useful for finding overflow, spacing, and alignment problems.

This debugging rule should be removed before publishing the page.

Outline Width vs Border Width

Although outlines and borders can look similar, they behave differently.

Feature	`outline-width`	`border-width`
Position	Generally outside the border	Around the padding area
Box-model space	Does not normally occupy space	Contributes to element dimensions
Effect on layout	Does not usually change layout	Can change size or layout
Individual sides	Cannot normally be set separately	Can be set for each side
Common use	Focus and visual emphasis	Structure and decoration
Offset support	Supports `outline-offset`	No direct border-offset property
Shape behavior	May not always follow complex element shapes identically	Follows the elements border box

Example:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  outline: 5px solid orange;
}

The border contributes to the rendered box dimensions under the standard content-box model. The outline is painted outside the border without adding another 5px to the calculated layout size.

Using Outline Width with Border Radius

Modern browsers commonly render outlines in a way that follows rounded corners created with border-radius.

.rounded-button {
  border-radius: 999px;
  outline: 4px solid teal;
  outline-offset: 3px;
}

However, rendering details can differ slightly between browsers, especially with unusual shapes, fragmented inline content, or complex clipping.

Responsive Outline Width

Outline thickness can use relative or calculated values.

.element {
  outline-style: solid;
  outline-color: #2563eb;
  outline-width: clamp(2px, 0.2em, 4px);
}

This allows the outline to remain within a controlled range.

For most buttons and links, a fixed value such as 2px or 3px is simple and dependable. Relative units can be useful when an interface scales significantly with its text.

Animating Outline Width

Because outline-width can be animated as a length, it may be used in transitions:

.card {
  outline: 0 solid transparent;
  transition:
    outline-width 200ms ease,
    outline-color 200ms ease;
}

.card:hover {
  outline-width: 4px;
  outline-color: #2563eb;
}

Remember that an outline requires a usable style to become visible. In the example, the solid style is defined in the initial shorthand declaration.

Animations should remain subtle. A rapidly changing or flashing outline may distract users.

A reduced-motion alternative can also be provided:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Common Mistakes

Setting only the width

.box {
  outline-width: 5px;
}

This may not show anything because outline-style is none by default.

Correct version:

.box {
  outline-width: 5px;
  outline-style: solid;
}

Using a negative width

.box {
  outline-width: -3px;
}

Negative outline widths are invalid. Use outline-offset if the goal is to reposition the outline:

.box {
  outline: 3px solid red;
  outline-offset: -3px;
}

Using percentages

.box {
  outline-width: 10%;
}

Percentage values are not valid for outline-width. Use a length or keyword instead:

.box {
  outline-width: 3px;
}

Expecting different widths on each side

Properties such as these do not exist:

/* Invalid properties */
outline-top-width: 2px;
outline-left-width: 5px;

An outline is treated as a single outline around the element. If each side needs a different width, use border properties:

.box {
  border-top-width: 2px;
  border-right-width: 4px;
  border-bottom-width: 6px;
  border-left-width: 8px;
  border-style: solid;
}

Expecting the outline to create spacing

An outline does not reserve layout space. Increasing its width may cause it to overlap surrounding content.

Use margin, padding, or another layout property when actual space is required:

.box {
  margin: 10px;
  outline: 6px solid orange;
}

Removing all focus indicators

*:focus {
  outline: none;
}

This makes keyboard navigation difficult. Keep the browsers default focus indicator or replace it with a clear custom design.

Browser Support

outline-width is a well-established CSS feature and works in modern versions of Chrome, Edge, Firefox, Safari, Opera, and major mobile browsers. MDN classifies it as widely available.

Basic values such as pixels, thin, medium, and thick are dependable for normal web development. Visual rendering can vary slightly because browsers may interpret keyword thicknesses differently.

Best Practices

Follow these practices when using outline-width:

Define an outline-style whenever you set an outline width.
Use 2px or more when a strong focus indicator is needed.
Make sure the outline contrasts with both the element and its surroundings.
Use outline-offset to prevent the outline from appearing crowded.
Prefer :focus-visible when designing keyboard-focused states.
Do not remove a browser focus outline without adding an accessible replacement.
Use length values when exact thickness is important.
Use keyword values when browser-controlled sizing is acceptable.
Remember that outlines can overlap nearby content.
Test focus indicators on light and dark backgrounds.
Do not rely on color alone to communicate errors or selection.

Complete Example

<form class="signup-form">
  <label for="name">Full name</label>
  <input id="name" type="text" required>

  <label for="user-email">Email address</label>
  <input id="user-email" type="email" required>

  <button type="submit">Create Account</button>
</form>

.signup-form {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
}

.signup-form input {
  padding: 10px 12px;
  font: inherit;
  border: 1px solid #94a3b8;
  border-radius: 6px;
}

.signup-form input:focus-visible {
  border-color: #1d4ed8;
  outline-width: 3px;
  outline-style: solid;
  outline-color: rgba(37, 99, 235, 0.4);
  outline-offset: 1px;
}

.signup-form button {
  padding: 11px 16px;
  color: white;
  font: inherit;
  font-weight: 600;
  background: #1d4ed8;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.signup-form button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

This example gives inputs and the submit button clear focus indicators. The outlines do not alter the forms layout when focus moves from one control to another.

Frequently Asked Questions

What does `outline-width` do in CSS?

It sets the thickness of the line drawn around an elements outline.

Why is my outline width not working?

The most common reason is that outline-style is still set to its initial value of none. Add a visible style such as solid, dashed, or dotted.

.element {
  outline-width: 3px;
  outline-style: solid;
}

What is the default value of `outline-width`?

The initial value is medium. However, an outline is not normally visible by default because the initial outline-style is none.

Does outline width affect element size?

No. An outline does not normally participate in the CSS box model, so it does not increase the calculated width or height of the element.

Can outline width be negative?

No. Negative outline-width values are invalid. A negative outline-offset can be used to move an outline inward.

Can I use a percentage for outline width?

No. Percentage values are not accepted.

Can each side have a different outline width?

No. CSS does not provide separate top, right, bottom, and left outline-width properties. Use individual border widths when side-specific styling is necessary.

What is the difference between `outline: 0` and `outline: none`?

Both commonly result in no visible outline. outline: none explicitly sets the outline style to none, while outline: 0 uses the shorthand with a zero width. Neither should be used to remove focus indicators unless an accessible alternative is supplied.

Is `outline-width` inherited?

No. Child elements do not automatically inherit the outline width of their parent.

Can outline width be animated?

Yes. It can be transitioned or animated as a length.

Conclusion

CSS outline-width is a simple but important property that determines how thick an elements outline appears. It accepts the keywords thin, medium, and thick, as well as non-negative length values such as 2px or 0.2rem.

Its greatest value is in accessible interface design. A clear outline helps keyboard users recognize the currently focused button, link, input, or control. Because outlines do not normally affect layout, they can add strong visual feedback without moving surrounding content.

For most interfaces, a declaration such as the following provides a clean and dependable focus indicator:

:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}