CSS outline-style Property

CSS outline-style property sets the outline style of an element.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.outlineStyle = "double"

Syntax

Here is a syntax for the CSS outline-style property

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

Property Values

The following table describes the values of this property.

Value Description
none Default. Displays no outline.
hidden same as none, except table cells outline conflict resolution
dotted Displays the outline as a series of rounded dots
dashed Displays the outline as a series of short square dashes
solid Displays the outline as a single solid line
double Displays the outline as a two parallel solid lines with some space between them equals the value of outline-width.
groove Displays the outline as a grooved outline. It's depend outline-color value to creating shadow from two colors that are slightly lighter and darker than the outline-color
ridge Displays the outline as a ridged outline that is opposite of groove effect.
inset Displays the outline as a inset outline, it's look as though it were embedded in the canvas. It's depend outline-color value to creating shadow from two colors that are slightly lighter and darker than the outline-color
outset Displays the outline as a outset outline that is opposite of inset effect.
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets outline right style.

.outline-1 {
  outline-style: solid;
}
.outline-2 {
  outline-style: none;
}
.outline-3 {
  outline-style: groove;
}
.outline-4 {
  outline-style: dashed;
}
.outline-5 {
  outline-style: double;
}
.outline-6 {
  outline-style: inset;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.