CSS outline-width Property

The outline-width property sets the thickness of the line drawn around an element, outside its border edge.

selector { outline-width: value; }

thin	Sets a thin outline, typically 1px depending on the browser.
medium	The default value, typically representing a 3px thickness.
thick	Sets a thick outline, typically 5px depending on the browser.
<length>	Defines the thickness using specific units like px, em, or rem.

Code Examples

A basic example showing a fixed 10px solid outline on a div element.

<div style="outline-style: solid; outline-width: 10px; outline-color: #ff0000; padding: 20px;">
  This box has a very thick red outline that does not affect its layout size.
</div>

An advanced example using JavaScript to dynamically change the outline thickness and color when a user interacts with the button.

<button id="actionBtn" style="outline: 2px solid #0000ff; padding: 10px;">Click to Thicken</button>

<script>
const btn = document.getElementById("actionBtn");
btn.addEventListener("click", () => {
  btn.style.outlineWidth = "10px";
  btn.style.outlineColor = "#00ff00";
  btn.textContent = "Outline Thickened via JS";
});
</script>

Pro Tip

Use "outline-width" in combination with "outline-offset". By setting a width of 2px and an offset of 4px, you create a professional "halo" effect that looks much cleaner and more modern than a cramped line hugging the element border.

Deep Dive

The "outline-width" property works by drawing a line around the exterior of an element's border. Think of it like a neon sign glowing around a building; it does not change the building's physical footprint on the sidewalk, but it highlights the perimeter. Because it sits outside the CSS Box Model, adding or increasing "outline-width" does not cause the element to take up more space or push neighboring elements around. This makes it perfect for temporary visual cues like focus states without breaking your layout flow. It requires the "outline-style" property to be set to something other than "none" to actually appear.

Best Practices

Always pair "outline-width" with an "outline-style" like "solid" or "dashed". Use specific length units like px for pixel-perfect precision when the standard keywords like "thin" or "thick" are too vague for your design. It is best used for active user interface elements to indicate interaction.

Common Pitfalls

The most common mistake is setting an "outline-width" and wondering why it is not showing up; it is because the default "outline-style" is "none". Also, keep in mind that unlike borders, you cannot set different widths for different sides of the outline; it is the same thickness all the way around.

Accessibility

This property is the bread and butter of keyboard navigation. If you decrease the "outline-width" to 0 or make it invisible for focus states, you are effectively blinding users who rely on the tab key to navigate. Always ensure your "outline-width" is substantial enough to be seen clearly against the background.

Dev Data Table: outline-width property

default	medium
animatable	yes
inherited	no
experimental	no
year_intro	1998
year_standard	1998
js_syntax_1	document.getElementById("myElement").style.outlineWidth = "5px";
js_syntax_2	document.getElementById("myElement").style.setProperty("outline-width", "5px");
js_note	When manipulating this property in JavaScript, ensure you also set an outlineStyle or the width change will not be visible.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1.5, "Safari": 1.2, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 12 }