CSS outline-width Property

What You’ll Learn

The outline-width property controls how thick an element’s outline is. It is key for visible focus rings and emphasis without changing layout.

Introduction

The outline-width property in CSS is used to define the thickness of the outline of an element. Unlike borders, outlines do not take up space in the layout and are drawn outside the element’s border edge.

This property is useful for highlighting elements, creating focus states, or adding visual emphasis to specific parts of a webpage.

Definition and Usage

Use keyword values like thin or thick for quick sizing, or precise lengths like 2px and 3px for consistent focus rings across your design system.

Pair outline-width with outline-style and outline-color for a complete outline effect.

📝 Syntax

The syntax for the outline-width property is simple and can be used with various values to control the thickness of the outline.

element {
  outline-width: width;
}

Here, width specifies the thickness of the outline and can be a keyword or a length value.

Basic Example

button {
  outline: solid black;
  outline-width: thick;
}

Syntax Rules

• Keywords: thin, medium, and thick.
• Lengths: any valid CSS length such as px, em, or rem.
• An outline needs a visible outline-style to show the width.
• The outline shorthand can set width, style, and color together.

🎯 Default Value

The default value of the outline-width property is medium, which is a browser-defined width that varies between browsers but is generally considered a standard medium thickness.

Use explicit pixel values when you need the same thickness everywhere.

💎 Property Values

Examples Gallery

Use keyword widths and precise pixel lengths for buttons, inputs, and focus rings.

<style>
  button {
    outline: solid black;
    outline-width: thick;
  }
</style>

<button>Click Me</button>

<style>
  input[type="text"] {
    outline: dashed blue;
    outline-width: 3px;
  }
</style>

<input type="text" placeholder="Type something...">

a:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-color: #2563eb;
  outline-offset: 2px;
}

.thin { outline: solid #2563eb; outline-width: thin; }
.medium { outline: solid #2563eb; outline-width: medium; }
.thick { outline: solid #2563eb; outline-width: thick; }

Part of the outline property set

outline-width sets thickness only. Combine it with outline-style, outline-color, and outline-offset, or use the outline shorthand.

/* width + style + color in one line */
button:focus-visible {
  outline: 3px solid #2563eb;
}

♿ Accessibility

• Use visible width — Focus outlines should be thick enough to notice, often 2px or more.
• Do not set width to 0 — on focus states unless you provide another clear indicator.
• Pair with contrast — Width alone is not enough; color contrast matters too.
• Test keyboard focus — Verify the ring is visible on all interactive elements.

💡 Best Practices