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

HTML

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

CSS

.block { 
   outline: 3px dotted blue; 
   outline-offset: 10px;
   padding: 10px; 
   border: 3px solid red;
   margin: 20px;
}

Result

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

Support Us