CSS outline-offset Property

The outline-offset property sets the amount of space between an outline and the edge or border of an element.

selector { outline-offset: value; }
<length> Specifies the distance the outline is translated from the border edge using units like px, pt, or em.

Code Examples

A basic example showing a 10px gap between a dark box border and its gold outline.

<style>
.simple-box {
  width: 200px;
  height: 100px;
  background: #333333;
  border: 2px solid #ffffff;
  outline: 2px solid #ffcc00;
  outline-offset: 10px;
  margin: 40px;
}
</style>
<div class="simple-box"></div>

An advanced example using CSS transitions for hover effects and JavaScript to dynamically toggle the outline-offset and color.

<style>
.dynamic-btn {
  padding: 10px 20px;
  font-size: 18px;
  background: #007bff;
  color: #ffffff;
  border: none;
  cursor: pointer;
  outline: 3px solid #007bff;
  outline-offset: 0px;
  transition: outline-offset 0.2s ease;
}
.dynamic-btn:hover {
  outline-offset: 4px;
}
</style>
<button class="dynamic-btn" onclick="toggleOffset(this)">Hover or Click Me</button>
<script>
function toggleOffset(el) {
  const current = window.getComputedStyle(el).outlineOffset;
  el.style.outlineColor = "#28a745";
  el.style.outlineOffset = current === "0px" ? "8px" : "0px";
}
</script>

Pro Tip

You can use negative values for outline-offset. This pulls the outline inside the element's border. This is a great trick for creating 'inset' decorative frames or focus rings that appear inside a large image or container without needing extra HTML elements or complex box-shadows.

Deep Dive

Think of the outline-offset like a moat around a castle. The border is the castle wall, and the outline is the outer perimeter. This property allows you to push that outer perimeter further out or even pull it inside the wall. Unlike padding or margin, this space is transparent and does not affect the element's box model or dimensions. It is drawn outside the element's content, padding, and border. Because it does not take up space in the layout, you can animate it or adjust it without causing the rest of your web page to jump or reflow. It is a strictly visual adjustment meant to enhance the visibility of the outline.

Best Practices

Use outline-offset to improve the clarity of focus indicators. By adding a 2px or 3px offset to buttons or links during their :focus state, you create a distinct 'halo' effect that makes it much easier for users navigating via keyboard to see exactly where they are on the page. Stick to pixel units for consistency across different screen resolutions.

Common Pitfalls

The most common mistake is forgetting that the outline and its offset do not occupy space in the document flow. If you set a massive offset, the outline might overlap neighboring elements or even bleed off the edge of the browser window. Another thing to remember is that it does not work if the outline-style is set to none.

Accessibility

This property is a powerhouse for accessibility. Standard outlines often sit right against the edge of an element, which can make them hard to see if the element has a similar background color to the outline. By using outline-offset, you create a gap that allows the page background to show through, providing the necessary contrast to make the focus ring pop for visually impaired users.

Dev Data Table: outline-offset property

default 0
animatable yes
inherited no
experimental no
year_intro 2004
year_standard 2015
js_syntax_1 element.style.outlineOffset = "5px";
js_syntax_2 element.style.setProperty("outline-offset", "5px");
js_note When using JavaScript to manipulate this property, remember that the value must be passed as a string including the unit of measurement.
browsers { "Chrome": 1, "Edge": 15, "Firefox": 1.5, "Safari": 1.2, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...