CSS Outline Offset
The outline-offset property adds space between an element's border edge and its outline.
By default an outline is drawn right against the border edge. The <outline-offset> property pushes it outward by a given distance, creating a visible gap between the element and its outline. The offset area stays transparent and shows the background behind it.
How the value works
- A positive length moves the outline outward, away from the element.
- A value of 0 draws the outline directly against the border, which is the default.
- A negative length pulls the outline inward, over the element.
Adding a gap
<!DOCTYPE html>
<html>
<head>
<style>
.field {
outline: 2px solid #00643c;
outline-offset: 4px;
}
</style>
</head>
<body>
<input class="field" type="text" value="Phone number">
</body>
</html>A padded focus ring
<!DOCTYPE html>
<html>
<head>
<style>
button:focus {
outline: 2px solid #00643c;
outline-offset: 3px;
}
</style>
</head>
<body>
<button>Save changes</button>
</body>
</html>Note: Because the offset does not affect layout, you can use it freely to make focus rings clearer without shifting any surrounding content.
Exercise: CSS Outline
Does adding an outline to an element change its layout or push neighboring elements?
