CSS outline Property

The outline property draws a line around an element, outside its border edge, to make it stand out.

selector { outline: width style color; }
<outline-color> Specifies the color of the outline using standard color names, hex codes, or the invert keyword.
<outline-style> Sets the appearance of the line such as solid, dotted, dashed, or double.
<outline-width> Sets the thickness of the line using length units like px or keywords like thin, medium, and thick.
none Ensures no outline is drawn around the element.
invert Performs a color inversion of the pixels behind the line to ensure visibility regardless of background.

Code Examples

A basic example showing how to style a custom focus ring that stands off from the button using an offset.

<style>
.custom-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  cursor: pointer;
}
.custom-button:focus {
  outline: 3px solid #ffcc00;
  outline-offset: 4px;
}
</style>
<button class="custom-button">Tab to Focus Me</button>

An advanced approach using JavaScript to dynamically toggle an outline for a debugging or highlight effect without triggering a layout reflow.

<style>
.box {
  width: 200px;
  height: 100px;
  background: #eeeeee;
  border: 2px solid #333333;
  transition: outline 0.2s;
}
</style>
<div id="debugBox" class="box"></div>
<script>
const box = document.getElementById("debugBox");
box.addEventListener("mouseenter", () => {
  box.style.outline = "5px solid #ff0000";
});
box.addEventListener("mouseleave", () => {
  box.style.outline = "0px solid #ff0000";
});
</script>

Pro Tip

You can use the outline-offset property to create a gap between the element's border and the outline itself. This is a great way to create a double-border effect or a sophisticated floating focus ring without touching the padding or margins.

Deep Dive

Think of a border as a physical wall you build around your yard; it takes up space and pushes your neighbors' fences away. An outline is more like a laser pointer projection around that same yard. It follows the shape of the element but has zero impact on the layout of the page. Because it does not take up space in the box model, adding or removing an outline will never cause the surrounding elements to jump or shift. It is rendered directly on top of the element's box, which means it might overlap other nearby elements.

Best Practices

Always use outlines to provide visual feedback for focused elements, especially for users navigating with a keyboard. If you do not like the default browser style, do not just turn it off; instead, restyle it to match your brand while maintaining high contrast.

Common Pitfalls

A common mistake is thinking that outline-radius exists; historically, outlines did not follow the rounded corners of a border-radius, though modern browsers have fixed this. Also, because outlines do not occupy space, they can be clipped by containers that have overflow set to hidden.

Accessibility

This is a critical property for accessibility. Removing the outline with "outline: none;" or "outline: 0;" without providing a clear, high-contrast alternative makes your site unusable for anyone not using a mouse. Always ensure your focus states are obvious.

Dev Data Table: outline property

default medium none invert
animatable yes
inherited no
experimental no
year_intro 1998
year_standard 2000
js_syntax_1 element.style.outline = "3px solid #ff0000";
js_syntax_2 element.style.setProperty("outline", "3px solid #ff0000");
js_note When manipulating the outline via JavaScript, ensure you provide the full shorthand string or target specific sub-properties like outlineColor to avoid clearing existing styles.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1.2", "Opera": "7", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }
results render here...