CSS outline-offset Property

Description

The outline-offset CSS property is used to control the space between an element's outline and its border or content. It allows web developers to adjust the distance between the outline and the element's edges, helping to improve the visual design and accessibility of elements like buttons or links. By increasing or decreasing the offset, designers can fine-tune the appearance of outlines, ensuring they do not overlap with neighboring elements and providing a more aesthetically pleasing and user-friendly experience for website visitors.

Initial value
0
Applies to
All elements
Inherited
No
Computed value
[length] value in absolute units (px or physical)
Animatable
No
JavaScript syntax
object.style.outlineOffset

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

outline-offset: <length> | inherit

Values

  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • inherit

Example

<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
.block { 
   outline: 3px dotted blue; 
   outline-offset: 10px;
   padding: 10px; 
   border: 3px solid red;
   margin: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS outline-offset property.

Desktop
Edge Chrome Firefox Opera Safari
1511.59.51.2
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 2nd January 2024