CSS outline-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The outline-style property controls the visual pattern used to draw an outline around an element. An outline is a line drawn outside the element’s border edge and is distinct from the border: it does not contribute to box dimensions, does not affect layout or spacing, and can overlap other content. Because it’s separate from the element’s box model, changing the outline style changes only how that external line looks, not how the element sizes or reflows.

The appearance you get from outline-style is combined with the outline’s color and thickness to produce the final outline; those aspects are controlled by outline-color and outline-width respectively. You can also separate the outline away from the element’s border edge using outline-offset, which shifts where the chosen style is rendered. Because the outline is rendered outside the border edge, it will typically follow the element’s outer shape (including rounded corners where supported) and is drawn on top of other content rather than reserving layout space.

From a usability and accessibility perspective, outline styling is commonly used to indicate focus for keyboard navigation and interactive controls. Designers should be cautious about removing or obscuring focus outlines without providing an equally visible alternative, since outlines play an important role for users who rely on keyboard focus indicators. Finally, because outlines do not affect hit testing or element geometry, toggling an element’s outline style won’t change its clickable area or cause layout shifts — it solely changes how that external emphasis is presented.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.outlineStyle

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

outline-style: auto | <border-style> | inherit

Values

noneOutline is not drawn, color and width are ignored.
dottedA series of round or square dots.
dashedThe outline is a series of short line segments.
solidThe outline is a single line.
doubleThe outline is two single lines. The outline-width is the sum of the two lines and the space between them.
grooveLooks as if it were carved in the canvas. (This is typically achieved by creating a "shadow" from two colors that are slightly lighter and darker than the outline-color.)
ridgeThe opposite of groove the outline looks as though it were coming out of the canvas.
insetThe outline makes the box look as though it were embeded in the canvas.
outsetThe opposite of inset the outline makes the box look as though it were coming out of the canvas.
inherit

Example

HTML

<div class="container">

  <h2>CSS outline-style examples</h2>

  <div class="examples">

    <button class="outline-solid">Solid</button>

    <button class="outline-dashed">Dashed</button>

    <button class="outline-dotted">Dotted</button>

    <button class="outline-double">Double</button>

    <button class="outline-groove">Groove</button>

    <button class="outline-ridge">Ridge</button>

    <button class="outline-inset">Inset</button>

    <button class="outline-outset">Outset</button>

    <button class="outline-none">None</button>

  </div>

  <p class="note">Open the page and you can also press Tab to focus buttons (if outlines are not visible without focus).</p>

</div>

CSS

.container {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
}

h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

button {
  padding: 10px 14px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}

button[class^="outline-"] {
  outline-offset: 6px;
}

.outline-solid {
  outline-style: solid;
  outline-color: #2b7cff;
  outline-width: 4px;
}

.outline-dashed {
  outline-style: dashed;
  outline-color: #ff8c00;
  outline-width: 3px;
}

.outline-dotted {
  outline-style: dotted;
  outline-color: #e91e63;
  outline-width: 3px;
}

.outline-double {
  outline-style: double;
  outline-color: #4caf50;
  outline-width: 6px;
}

.outline-groove {
  outline-style: groove;
  outline-color: #8e44ad;
  outline-width: 6px;
}

.outline-ridge {
  outline-style: ridge;
  outline-color: #16a085;
  outline-width: 6px;
}

.outline-inset {
  outline-style: inset;
  outline-color: #d35400;
  outline-width: 4px;
}

.outline-outset {
  outline-style: outset;
  outline-color: #c0392b;
  outline-width: 4px;
}

.outline-none {
  outline-style: none;
  outline-width: 0;
}

.note {
  margin-top: 14px;
  color: #555;
  font-size: 13px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS outline-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.