CSS outline-offset Property

Description

The outline-offsetproperty is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

Initial value

0

Applies to

All elements

Inherited

No

Media

Visual

Computed value

[length] value in absolute units (px or physical)

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.outlineOffset

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

Desktop
X	15	1	1.5	9.5	1.2
Tablets / Mobile
37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019