Outlines | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`outline-color`	1	12	1.5	1.2	18	1
`transparent`	1	12	1	1.2	18	1
Other
`css.properties.outline-offset` The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.	1	15	1.5	1.2	18	1
`css.properties.outline-style` The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.	1	12	1.5	1.2	18	1
CSS property
`auto`	1	12	1.5	1.2	18	1
`dashed`	1	12	1	1.2	18	1
`dotted`	1	12	1	1.2	18	1
`double`	1	12	1	1.2	18	1
`groove`	1	12	1	1.2	18	1
`inset`	1	12	1	1.2	18	1
`none`	1	12	1	1.2	18	1
`outset`	1	12	1	1.2	18	1
`ridge`	1	12	1	1.2	18	1
`solid`	1	12	1	1.2	18	1
Other
`css.properties.outline-width` The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.	1	12	1.5	1.2	18	1
CSS property
`medium`	1	12	1	1.2	18	1
`thick`	1	12	1	1.2	18	1
`thin`	1	12	1	1.2	18	1

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}
.debug * {
  outline: 1px solid red;
}

CSS Focusoutline demo.

CSS Outline-offset demo.

CSS debaguseoutline demo.

Using Outlines

The outline-color CSS property sets the color of an element's outline.