CSS outline-offset property

Definition and Usage

The outline-offset property offsets the outline and draws it at the edge of the border.

The outline is different from the border in two aspects:

  • The outline does not occupy space
  • The outline may be non-rectangular

See also:

CSS Tutorial:CSS User Interface

HTML DOM Reference Manual:outlineOffset Property

Example

Specifies the outline at 15 pixels outside the border edge:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Try it yourself

CSS Syntax

outline-offset: length|inherit;

Property Value

Value Description
length Distance from the outline to the edge of the border.
inherit Specifies that the outline-offset property should inherit its value from the parent element.

Technical Details

Default Value: 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.outlineOffset="15px"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
4.0 15.0 3.5 3.1 10.5