CSS Reference Property

outline-style

The outline-style property is used to set the style of an element’s outline.

An outline is a line that is drawn outside the borders of an element to make it stand out on the page. It is usually used for accessibility reasons, and can be used for decoration purposes. Refer to the outline property entry for more information about outlines, how they differ from borders, and more.

The outline-style property is a longhand property that can be specified as part of the shorthand outline property. It is usually more convenient to set the outline of an element using the shorthand property.

Official Syntax

  • Syntax:

    outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
  • Initial: none
  • Applies To: all elements
  • Animatable: no

Values

none
Displays no outline. Color and width set on the outline will be ignored. The outline width value will be `0`.
hidden
Similar to none, it displays no outline. Color and width set on the outline will be ignored. The outline width value will be `0`.
dotted
Displays an outline as a set of rounded dots. The radius of the dots is equal to half of the width of the outline.
dashed
Displays an outline as a series of square-ended dashes.
solid
Displays an outline as a solid straight line.
double
Displays two parallel solid lines with some space between them. The thickness of the lines is not specified, but the sum of the lines and the space must equal to the value of the outline-width property’s value.
groove
The displayed outline looks 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 color specified using the outline-color property.
ridge
The outline looks as if it were coming out of the canvas in a 3D effect. It is the opposite of the effect achieved by the groove value.
inset
Displays an outline that makes the element look as if it is “sunken” or embedded into the page.
outset
Displays an outline that makes the element look as if it is embossed with a 3D effect. It has the opposite of the effect achieved by the inset property.

Notes

The following image shows the result of applying any of the above styles to an element’s border.

outline styles
The rendering of the predefined outline styles.

Not all browsers may render the styles the same way. Chrome, for instance, currently renders the dots as rectangular dots not circular ones.

The specification does not specify the amount of spacing between the dots and the dashes. Browser implementations are encouraged to choose a spacing that makes the corners symmetrical.

The specification also does not define how outlines of different styles should be joined in the corner.

The color of outline drawn for values of groove, ridge, inset, and outset depends on the element’s outline color property, but browsers may choose their own algorithm to calculate the actual colors used. For instance, if the outline-color has the value silver, then a browser could use a gradient of colors from white to dark gray to indicate a sloping outline.

Examples

The following adds a 2px-width dotted purple outline to input fields when they are focused/tabbed. The width and color of the outline are set using the outline-width and outline-color properties.

input[type="text"]:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: purple;
}

Live Demo

The following demo sets the outline style on boxes (<div>s) with different outlines.

View this demo on the Codrops Playground

Browser Support

The outline-style property is supported in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is supported starting from version 8.

Written by

Last updated February 4, 2015 at 3:56 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.