In this section, we will learn what the outline-style property is and how to use it in CSS.

Click here to run the outline-style property.

CSS outline-style Property Definition and Usage

The CSS `outline-style` property is used to style the outline of an element.

Note: by default, you won’t see an outline around the border of an element because the initial value of this property is set to ‘none’, which means no styling for the outline of an element.

CSS outline-style Property Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

CSS outline-style Property Value

Here’s the list of values that we can use for this property:

• none: default value, which means there shouldn’t be any style for the target outline.
• hidden: using this value, the target outline becomes hidden.
• dotted: using this value, the target outline will have a dotted style.
• dashed: it creates a series of short lines
• double: it creates two solid lines
• groove: it creates a line that appears to be carved into the page
• ridge: it creates a line that appears to stick out from the page.
• inset: it creates a line that appears to embedded into the page.
• outset: it creates a line that like it is coming out of the display device.

Example: outline-style in CSS

See the Pen outline-style in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.