The outline-style property is used to set the style of an outline around an element. An outline is a line that is drawn around the outside of an element, outside the border. It is often used to highlight an element or to indicate focus on an interactive element such as a link or form input.
The outline-style property can be used in conjunction with the outline-width and outline-color properties to fully customize the appearance of the outline.
The syntax for the outline-style property is as follows:
selector { outline-style: value; }
The value can be one of the following:
none
: No outline is drawn.solid
: A solid line is drawn.dotted
: A dotted line is drawn.dashed
: A dashed line is drawn.double
: A double line is drawn.groove
: A 3D groove is drawn.ridge
: A 3D ridge is drawn.inset
: A 3D inset is drawn.outset
: A 3D outset is drawn.inherit
: The value is inherited from the parent element.Here are some examples of how the outline-style property can be used:
/* No outline */ p { outline-style: none; } /* Solid outline */ a:focus { outline-style: solid; } /* Dotted outline */ input:focus { outline-style: dotted; } /* Dashed outline */ button:focus { outline-style: dashed; } /* Double outline */ h1:focus { outline-style: double; } /* 3D groove outline */ div:focus { outline-style: groove; } /* 3D ridge outline */ span:focus { outline-style: ridge; } /* 3D inset outline */ ul:focus { outline-style: inset; } /* 3D outset outline */ li:focus { outline-style: outset; }
The outline-style property is supported by all major browsers.
The outline-style property is a useful tool for adding visual emphasis to an element or indicating focus on an interactive element. By combining it with the outline-width and outline-color properties, you can fully customize the appearance of the outline to suit your needs.