Utilities for controlling an element’s outline.

In this article

These utilities can be useful when the default browser outline style is unsuitable for focused elements.

Class Properties
.outline-none outline: 0;


Use .outline-none to remove browser specific outlining of focused elements.

When using this utility you should apply your own focus style to ensure that focusable elements are accessible.


By default, no responsive or hover-state variants are generated for outline utilities.


To include responsive variants like .md:outline-none, add "outline" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...


To include hover-state variants like .hover:outline-none, add "outline" to the $hover-variants variable:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know