CSS3 outline-offset Property


Specify an outline 15px outside the border edge:

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

Try it yourself »

Definition and Usage

The outline-offset property adds space between an outline and the edge or border of an element.

Outlines differ from borders in two ways:

  • An outline is a line drawn around elements, outside the border edge
  • A outline do not take up space
  • An outline may be non-rectangular

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.outlineOffset="15px" Try it

Browser Support

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

outline-offset 4.0 Not supported 3.5 3.1 10.5

CSS Syntax

outline-offset: length|initial|inherit;

Property Values

Value Description
length The distance the outline is outset from the border edge. Default value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS3 tutorial: CSS3 User Interface

HTML DOM reference: outlineOffset property




Search w3schools.com:

Translate w3schools.com: