CSS Outline Offset: Syntax, Values, Examples & Uses

Learn CSS outline-offset with syntax, positive and negative values, examples, focus styles, accessibility tips, and differences from border and margin.

Dibya Lochan Mendali's avatarByDibya Lochan Mendali

CSS Outline Offset

CSS outline-offset is a useful property for controlling the amount of space between an element’s outline and its border edge. It does not create an outline by itself. Instead, it changes the position of an outline that has already been defined using properties such as outline, outline-width, outline-style, and outline-color.

It is especially useful for focus indicators, buttons, links, form controls, accessibility improvements, debugging, and decorative interface effects.

A simple example looks like this:

button {
  outline: 2px solid blue;
  outline-offset: 4px;
}

Here, the blue outline appears 4 pixels away from the outer border edge of the button.

What Is CSS outline-offset?

The outline-offset property specifies the distance between an element’s outline and the edge of its border.

Its basic syntax is:

selector {
  outline-offset: length;
}

For example:

.box {
  outline: 3px solid red;
  outline-offset: 10px;
}

The outline is moved 10 pixels outward from the border edge.

Unlike margin or padding, outline-offset does not affect the size or position of surrounding elements.

Basic Syntax

outline-offset: length;

It can also accept global CSS values:

outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

A practical declaration might be:

.element {
  outline: 2px solid black;
  outline-offset: 5px;
}

The outline-offset property takes one value, which applies uniformly around the element.

Default Value

The initial value of outline-offset is:

outline-offset: 0;

This means the outline normally begins at the element’s border edge.

Example:

.box {
  border: 2px solid gray;
  outline: 2px solid red;
  outline-offset: 0;
}

The red outline is drawn immediately outside the border.

Positive outline-offset Values

A positive value moves the outline away from the element.

Example:

button {
  outline: 2px solid royalblue;
  outline-offset: 5px;
}

Conceptually:

Outline
   ?
+----------------------+
|                      |
|   +--------------+   |
|   |    Button    |   |
|   +--------------+   |
|                      |
+----------------------+

The gap between the element and its outline is controlled by outline-offset.

Larger positive values create more space.

.example {
  outline: 2px solid green;
  outline-offset: 15px;
}

Negative outline-offset Values

One of the most useful features of outline-offset is its ability to accept negative values.

A negative value moves the outline toward the inside of the element.

For example:

.box {
  outline: 3px solid red;
  outline-offset: -6px;
}

Instead of appearing outside the border, the outline is pulled inward.

This can be useful for decorative borders or highlighted states.

Another example:

.card {
  background: #f5f5f5;
  outline: 2px solid black;
  outline-offset: -8px;
  padding: 30px;
}

The outline appears inside the card.

However, negative offsets should be used carefully for focus indicators. An inward outline may overlap content or become harder to see.

outline-offset: 0

Setting the value to zero places the outline at its normal position.

div {
  outline: 2px solid blue;
  outline-offset: 0;
}

This is equivalent to the property’s initial value.

Length Units Supported by outline-offset

outline-offset accepts CSS <length> values.

Common examples include:

outline-offset: 4px;
outline-offset: 0.25rem;
outline-offset: 0.5em;
outline-offset: 2mm;

Pixels are common for focus indicators:

button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

Relative units can also be useful in scalable interfaces:

button {
  outline-offset: 0.2em;
}

Percentages are not valid values for outline-offset.

For example:

outline-offset: 10%;

is not a valid use of the property.

outline-offset Requires an Outline

An important point is that outline-offset does not display anything by itself.

This code may produce no visible effect:

.box {
  outline-offset: 10px;
}

You also need an outline.

For example:

.box {
  outline: 2px solid red;
  outline-offset: 10px;
}

Now the offset becomes visible.

Using outline-offset with the outline Shorthand

The easiest method is usually to define the outline with the outline shorthand.

button {
  outline: 3px solid blue;
  outline-offset: 4px;
}

The shorthand may specify:

outline: outline-width outline-style outline-color;

For example:

.element {
  outline: 4px dashed orange;
  outline-offset: 6px;
}

Notice that outline-offset is not part of the outline shorthand.

This is invalid:

outline: 2px solid blue 5px;

Instead, write:

outline: 2px solid blue;
outline-offset: 5px;

Using Individual Outline Properties

You can also define each outline property separately.

.box {
  outline-width: 3px;
  outline-style: solid;
  outline-color: purple;
  outline-offset: 8px;
}

This produces the same general effect as:

.box {
  outline: 3px solid purple;
  outline-offset: 8px;
}

outline-offset vs outline-width

These two properties control completely different things.

outline-width controls the thickness of the outline.

outline-width: 5px;

outline-offset controls the distance between the outline and the element.

outline-offset: 5px;

For example:

.box {
  outline: 6px solid red;
  outline-offset: 10px;
}

The outline is 6 pixels thick and is positioned 10 pixels away from the border edge.

outline-offset vs Margin

Margin controls the space outside an element and participates in layout.

margin: 20px;

outline-offset only changes where the outline is painted.

outline-offset: 20px;

Consider:

.box {
  margin: 20px;
}

The surrounding layout changes.

By contrast:

.box {
  outline: 2px solid red;
  outline-offset: 20px;
}

The element’s layout position does not change merely because the outline has been moved outward.

This distinction is very important.

outline-offset vs Padding

Padding creates space between an element’s content and border.

padding: 20px;

outline-offset creates visual separation between the border edge and outline.

outline-offset: 20px;

A combined example is:

button {
  padding: 12px 20px;
  border: 1px solid gray;
  outline: 2px solid blue;
  outline-offset: 4px;
}

Here:

  • padding controls internal space.
  • border surrounds the padding.
  • outline-offset separates the outline from the border.
  • outline draws the focus ring.

CSS Box Model and outline-offset

The traditional box model contains:

Content
Padding
Border
Margin

An outline is painted outside the border, but it is not normally considered a box-model layer in the same way as padding, border, and margin.

With a positive offset, the visual relationship can be imagined as:

Outline
   ?

+-----------------------------+
|                             |
|    space from offset        |
|                             |
|    +-------------------+    |
|    |      Border       |    |
|    |  +-------------+  |    |
|    |  |   Padding   |  |    |
|    |  |   Content   |  |    |
|    |  +-------------+  |    |
|    +-------------------+    |
|                             |
+-----------------------------+

The offset does not increase padding or margin.

Best Use: Accessible Focus Indicators

One of the most important uses of outline-offset is creating visible keyboard focus states.

For example:

button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

When a keyboard user focuses the button, the outline appears slightly separated from the button.

This separation can make the focus indicator easier to distinguish from the button’s border or background.

:focus Example

You can use it with the :focus pseudo-class:

input:focus {
  outline: 2px solid blue;
  outline-offset: 3px;
}

However, modern interfaces often benefit from :focus-visible.

:focus-visible Example

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

:focus-visible allows browsers to show a custom focus indicator when it is particularly useful, commonly during keyboard navigation.

This can avoid unnecessarily displaying focus rings for some pointer interactions while keeping keyboard navigation clear.

Do Not Remove Focus Outlines Without a Replacement

A common CSS rule is:

button:focus {
  outline: none;
}

Using this without another clear focus indicator can create accessibility problems.

Instead, provide a visible replacement:

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

Good focus styling helps users who navigate websites using keyboards or other assistive interaction methods.

Button Example

<button class="btn">Learn More</button>

.btn {
  padding: 10px 18px;
  border: 2px solid #333;
  background: white;
}

.btn:focus-visible {
  outline: 3px solid blue;
  outline-offset: 4px;
}

When focused, the button receives a clearly separated focus ring.

Link Example

a {
  color: darkblue;
}

a:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}

Using currentColor makes the outline use the element’s current text color.

Input Field Example

input {
  border: 1px solid #777;
  padding: 8px;
}

input:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

The visible space between the input border and focus outline makes the state easier to recognize.

Checkbox Example

input[type="checkbox"]:focus-visible {
  outline: 2px solid blue;
  outline-offset: 3px;
}

The same technique can be applied to radios and other form controls.

Using currentColor

The currentColor keyword is particularly convenient with outlines.

button {
  color: darkgreen;
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

If the text color changes, the outline automatically follows it.

Decorative Outline Effect

outline-offset is not limited to accessibility.

It can also create decorative visual effects.

.card {
  border: 2px solid black;
  outline: 2px solid black;
  outline-offset: 6px;
  padding: 30px;
}

This can create a double-border appearance without adding another HTML element.

Double-Border Effect

.box {
  border: 4px solid navy;
  outline: 2px solid skyblue;
  outline-offset: 5px;
}

The border and outline remain visually separated.

Because the outline does not affect normal layout, this technique can be simpler than nesting multiple elements.

Inset-Like Decorative Effect

A negative offset can create an outline inside the element:

.photo-frame {
  padding: 25px;
  border: 8px solid #222;
  outline: 2px solid white;
  outline-offset: -14px;
}

The result can resemble an inner frame.

Hover Effect

You can animate or change the offset on hover.

.button {
  outline: 2px solid transparent;
  outline-offset: 0;
}

.button:hover {
  outline-color: blue;
  outline-offset: 5px;
}

This produces a visual separation around the element.

For interaction states, remember that hover styling should not replace keyboard focus styling.

Animating outline-offset

outline-offset can be transitioned.

Example:

button {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline-offset 0.2s ease;
}

button:hover {
  outline-color: blue;
  outline-offset: 5px;
}

You can also combine it with :focus-visible:

button {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition:
    outline-offset 0.2s ease,
    outline-color 0.2s ease;
}

button:focus-visible {
  outline-color: blue;
  outline-offset: 4px;
}

Keep important focus indicators immediately understandable rather than relying on elaborate animation.

Global Values

Like many CSS properties, outline-offset supports global values.

initial

outline-offset: initial;

This resets the property to its initial value, which is 0.

inherit

outline-offset: inherit;

The element takes the computed outline-offset value from its parent.

unset

outline-offset: unset;

Because outline-offset is not normally inherited, unset generally behaves like initial.

revert

outline-offset: revert;

This rolls the property back according to the CSS cascade to the value from an earlier cascade origin.

revert-layer

outline-offset: revert-layer;

This rolls back the declaration within cascade layers when CSS cascade layers are being used.

Is outline-offset Inherited?

No. outline-offset is not inherited by default.

For example:

.parent {
  outline-offset: 10px;
}

A child element does not automatically receive the same value.

You can explicitly inherit it:

.child {
  outline-offset: inherit;
}

Can outline-offset Use Multiple Values?

No.

Properties such as margin can accept multiple values:

margin: 10px 20px;

But outline-offset takes only one offset value:

outline-offset: 5px;

You cannot independently define top, right, bottom, and left outline offsets through separate outline-offset-* properties.

For example, properties such as these do not exist:

outline-offset-top
outline-offset-right
outline-offset-bottom
outline-offset-left

The same offset applies around the outline.

Can outline-offset Use Percentages?

No.

This is not valid:

outline-offset: 10%;

Use a length instead:

outline-offset: 10px;

or:

outline-offset: 0.5rem;

Can outline-offset Be Negative?

Yes.

For example:

outline-offset: -5px;

Negative values move the outline inward.

Positive values move it outward.

/* outward */
outline-offset: 5px;

/* normal position */
outline-offset: 0;

/* inward */
outline-offset: -5px;

Border vs Outline vs Outline Offset

The three concepts are closely related but perform different jobs.

PropertyPurposeAffects Layout?
borderDraws a border around an elementYes, normally contributes to box dimensions
outlineDraws an outline around an elementNo
outline-offsetControls the distance between outline and border edgeNo

Example:

.box {
  border: 3px solid black;
  outline: 2px solid red;
  outline-offset: 8px;
}

The black line is the border. The red line is the outline. The 8-pixel gap is created by outline-offset.

outline-offset vs box-shadow

Both can create visual rings around elements, but they work differently.

Example using an outline:

button:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}

A box-shadow alternative might be:

button:focus-visible {
  box-shadow: 0 0 0 3px blue;
}

Outlines are especially well suited to focus indicators because they directly represent the browser concept of an outline.

box-shadow, however, offers more options for blurring, multiple rings, and complex visual effects.

In some designs, both can be combined carefully.

Outline Offset with Rounded Corners

You may use outline-offset on elements with border-radius.

button {
  border-radius: 8px;
  outline: 2px solid blue;
  outline-offset: 4px;
}

Modern browsers generally render outlines in a way that works well with rounded UI elements, but exact visual rendering can vary depending on the element shape and browser.

Always test important focus styles in the browsers your project supports.

Outline Offset and Layout

One of the most important characteristics of outlines is that they do not normally participate in document layout.

Suppose you have:

.box {
  width: 200px;
  height: 100px;
  outline: 4px solid red;
  outline-offset: 20px;
}

The 20-pixel offset does not make the CSS width become 240 pixels.

The outline is painted visually around the element.

This also means that a large outline offset may visually overlap neighboring content if insufficient spacing exists.

Large outline-offset Values

There is no practical reason to limit yourself to tiny offsets.

For example:

.box {
  outline: 2px solid red;
  outline-offset: 30px;
}

However, very large values can create visual overlap.

For interface controls, smaller values such as:

outline-offset: 2px;
outline-offset: 3px;
outline-offset: 4px;

are often more practical.

Outline Offset and Overflow

Because outlines are painted outside the element and do not participate in layout, they may interact visually with containers and clipping behavior.

For example:

.container {
  overflow: hidden;
}

A descendant with a large outer focus indicator may appear clipped in some layouts depending on how the surrounding interface is structured.

When creating accessible components, test focus indicators inside scroll containers, modals, cards, navigation menus, and clipped components.

Using CSS Custom Properties

You can make outline spacing reusable through custom properties.

:root {
  --focus-outline-size: 2px;
  --focus-outline-offset: 3px;
}

Then:

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: var(--focus-outline-size) solid currentColor;
  outline-offset: var(--focus-outline-offset);
}

This makes it easier to keep focus styles consistent throughout a website.

Reusable Focus Style

A simple reusable pattern is:

:where(
  a,
  button,
  input,
  select,
  textarea
):focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

More complex applications may use design tokens:

:root {
  --focus-color: #005fcc;
  --focus-width: 3px;
  --focus-offset: 3px;
}

button:focus-visible {
  outline:
    var(--focus-width)
    solid
    var(--focus-color);

  outline-offset: var(--focus-offset);
}

Using calc()

Because the property accepts length values, calculated lengths can also be useful.

.element {
  outline: 2px solid blue;
  outline-offset: calc(2px + 0.1rem);
}

In most projects, a simple fixed or relative length is easier to maintain, but calculated values can help in design systems.

CSS Variables with calc()

:root {
  --space-unit: 4px;
}

button:focus-visible {
  outline: 2px solid blue;
  outline-offset: calc(var(--space-unit) / 2);
}

This gives an offset of 2 pixels when --space-unit is 4 pixels.

Common Mistakes

The most common mistakes involving outline-offset include:

  • Using outline-offset without defining a visible outline.
  • Assuming the property creates physical layout spacing.
  • Trying to use percentage values.
  • Attempting to put the offset inside the outline shorthand.
  • Removing default focus outlines without providing an accessible replacement.
  • Using very large offsets that overlap neighboring elements.
  • Using negative offsets that make focus indicators difficult to see.
  • Confusing outline-offset with outline-width.
  • Expecting different offset values for individual sides.

Incorrect Example: No Outline

button {
  outline-offset: 5px;
}

There may be nothing visible because no outline has been specified.

Better:

button {
  outline: 2px solid blue;
  outline-offset: 5px;
}

Incorrect Example: Percentage

button {
  outline-offset: 10%;
}

Use a valid length:

button {
  outline-offset: 4px;
}

Incorrect Example: Offset Inside Shorthand

Do not write:

outline: 2px solid blue 4px;

Use:

outline: 2px solid blue;
outline-offset: 4px;

Incorrect Example: Removing Keyboard Focus

Avoid doing only this:

button:focus {
  outline: none;
}

A better approach is:

button:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}

If the browser’s default focus indicator already works well for your design, you can also leave it unchanged.

Practical Navigation Example

<nav>
  <a href="#">Home</a>
  <a href="#">Tutorials</a>
  <a href="#">Contact</a>
</nav>

nav a {
  display: inline-block;
  padding: 8px 12px;
  text-decoration: none;
}

nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

This allows keyboard users to clearly see which navigation link currently has focus.

Complete Card Example

<div class="card">
  <h2>CSS Tutorial</h2>
  <p>Learn modern CSS properties with practical examples.</p>
  <a href="#">Read Tutorial</a>
</div>

.card {
  max-width: 320px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.card a:focus-visible {
  outline: 3px solid blue;
  outline-offset: 4px;
}

The focus ring is visually separated from the link, improving clarity.

Browser Support

outline-offset has been supported by modern browsers for many years and can generally be used safely in contemporary web development.

Still, visual rendering of outlines can differ slightly between browsers, operating systems, and native form controls. Test important interactive components in the browsers and platforms your website intends to support.

Accessibility Best Practices

For accessible interfaces, outline-offset works best when it supports a strong, visible focus indicator. A good focus style should have sufficient contrast with surrounding colors and should not be hidden behind other interface elements.

A practical pattern is:

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

The exact color, thickness, and spacing should match the site’s visual design while remaining easy to see.

Performance

outline-offset is a lightweight visual property and is generally safe to use throughout normal interfaces.

For ordinary effects such as:

button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 3px;
}

performance should not be a concern.

As with any visual animation, avoid unnecessary continuous animations across large numbers of elements.

Quick Reference

FeatureDetails
Propertyoutline-offset
PurposeSets the space between an outline and the border edge
Initial value0
InheritedNo
Percentage allowedNo
Negative valuesYes
Positive valuesYes
Affects normal layoutNo
Common unitspx, em, rem and other length units
Common useFocus indicators and decorative outline effects
Part of outline shorthandNo

Positive vs Zero vs Negative Values

CSSEffect
outline-offset: 8px;Moves outline outward
outline-offset: 0;Keeps outline at its normal border-edge position
outline-offset: -8px;Moves outline inward

Example:

.positive {
  outline: 2px solid green;
  outline-offset: 8px;
}

.zero {
  outline: 2px solid blue;
  outline-offset: 0;
}

.negative {
  outline: 2px solid red;
  outline-offset: -8px;
}

Frequently Asked Questions

What does outline-offset do in CSS?

It controls the distance between an element’s outline and its border edge.

outline-offset: 4px;

A positive value moves the outline outward.

Does outline-offset affect element size?

No. It changes where the outline is painted without changing the element’s normal box dimensions.

Can outline-offset have a negative value?

Yes.

outline-offset: -5px;

This moves the outline inward.

What is the default value?

The initial value is:

outline-offset: 0;

Can I use percentages?

No. outline-offset accepts length values, not percentages.

Is outline-offset included in the outline shorthand?

No.

Write:

outline: 2px solid blue;
outline-offset: 4px;

Is outline-offset inherited?

No, not by default.

What is a good use for outline-offset?

One of its best uses is improving keyboard focus visibility:

button:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}

What is the difference between outline-width and outline-offset?

outline-width controls how thick the outline is, while outline-offset controls how far the outline is positioned from the element.

Does outline-offset work without outline?

The property can be declared, but it cannot visibly offset an outline when no visible outline exists.

Final Example

Here is a practical modern pattern:

button {
  padding: 10px 18px;
  border: 2px solid #222;
  border-radius: 6px;
  background: white;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

The button maintains its normal dimensions, while keyboard focus produces a clear ring outside its border.

Conclusion

CSS outline-offset is a small property with an important role in both design and accessibility. It controls the distance between an element’s outline and its border edge without changing the element’s normal layout.

Positive values move the outline outward, 0 keeps it at its normal position, and negative values move it inward. Because it works especially well with :focus-visible, it is widely useful for creating clear keyboard focus indicators.

A reliable pattern for many interfaces is:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Used carefully, outline-offset can improve accessibility, make interactive states easier to recognize, and create useful decorative effects without introducing extra HTML elements or changing the CSS box model.

Dibya Lochan Mendali's avatar

Dibya Lochan Mendali is an Indian blogger, content creator, web developer, and tutor. He works on NewNID.com, where he shares useful content about blogging, technology, digital marketing, education, and internet guides. His goal is to make knowledge simple, practical, and accessible to everyone.

Leave a Reply