CSS Outline

The CSS outline property draws a line around an element without changing the element's dimensions or taking up space in the surrounding layout.

An outline is drawn outside an element's border edge and is often used to make elements stand out or provide visible keyboard focus indicators. Although outlines can look similar to borders, they behave differently within the CSS box model.

How Outlines Work

An outline is drawn around the outside of an element's border edge. Unlike a border, an outline does not take up space and does not affect the element's calculated width or height.

.box {
  outline: 3px solid steelblue;
}

The outline is painted around the element without making the element's box larger. Because it does not participate in layout, an outline can overlap nearby content.

The outline-style Property

The outline-style property controls the appearance of the outline.

Value	Description
`none`	Displays no outline.
`auto`	Allows the browser or platform to choose the outline style.
`dotted`	Displays a series of dots.
`dashed`	Displays a series of short line segments.
`solid`	Displays a single solid line.
`double`	Displays two parallel lines.
`groove`	Displays an outline that appears carved into the page.
`ridge`	Displays an outline that appears raised from the page.
`inset`	Displays an outline with an inset appearance.
`outset`	Displays an outline with an outset appearance.

.box {
  outline-style: dashed;
}

The outline-width Property

The outline-width property controls the thickness of the outline.

.box {
  outline-style: solid;
  outline-width: 5px;
}

The width can use CSS length values such as 2px or the keywords thin, medium, and thick.

An outline style other than none is needed for the outline to be visible.

The outline-color Property

The outline-color property controls the color of the outline.

.box {
  outline-style: solid;
  outline-color: steelblue;
}

Outline colors can use CSS color values such as named colors, hexadecimal values, RGB, HSL, and other supported color formats.

The invert keyword can also be supported for outlines, allowing the browser to choose a contrasting color by inverting pixels behind the outline. Support and appearance can vary, so an explicit color is generally more predictable when a particular design is required.

The outline Shorthand Property

The outline shorthand property can set the outline width, style, and color in a single declaration.

.box {
  outline: 4px solid steelblue;
}

In this example, 4px is the width, solid is the style, and steelblue is the color.

Unlike borders, outlines do not have separate properties for the top, right, bottom, and left sides. The outline surrounds the element as a whole.

The outline-offset Property

The outline-offset property controls the space between an outline and the element's border edge.

.box {
  border: 2px solid gray;
  outline: 3px solid steelblue;
  outline-offset: 5px;
}

A positive value moves the outline farther away from the element. The space created by outline-offset is transparent and does not affect the surrounding layout.

Negative values are also allowed and move the outline inward.

Outline vs Border

Borders and outlines can both draw lines around elements, but they serve different purposes and behave differently.

Border	Outline
Is part of the box model.	Does not take up space in the box model.
Can affect an element's overall size.	Does not change the element's layout size.
Can style each side separately.	Surrounds the element as a whole.
Can separate content visually as part of the design.	Is commonly useful for emphasis and focus indicators.

Because an outline does not take up layout space, adding or removing one does not normally cause surrounding elements to move.

Focus Outlines

One important use of outlines is showing which interactive element currently has keyboard focus. Browsers provide default focus indicators for controls such as links, buttons, and form fields.

button:focus-visible {
  outline: 3px solid steelblue;
  outline-offset: 3px;
}

The :focus-visible pseudo-class can be used to provide a custom focus indicator when the browser determines that a visible focus indication is appropriate, such as during keyboard navigation.

A visible focus indicator is important for accessibility. Avoid removing a browser's focus outline unless you provide another clearly visible focus style.

Outline Example

The following example uses both a border and an outline so their positions can be compared.

.box {
  border: 3px solid gray;
  outline: 4px solid steelblue;
  outline-offset: 6px;
}

Open the example in the editor and change the outline width, style, color, or outline-offset. Try changing the offset to 0, 10px, or -5px to see how the outline moves without changing the box's layout size.

Play in Editor