CSS outline-offset Property


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
Applies to
All elements
Computed value
[length] value in absolute units (px or physical)
JavaScript syntax

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.


outline-offset: <length> | inherit


  • <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


<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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024