The outline-style property sets the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

  • Initial valuenone
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.outlineStyle
Formal syntax: auto | <border-style> | inherit

outline-style: [value];
  • noneOutline is not drawn, color and width are ignored.
  • dottedA series of round or square dots.
  • dashedThe outline is a series of short line segments.
  • solidThe outline is a single line.
  • doubleThe outline is two single lines. The outline-width is the sum of the two lines and the space between them.
  • grooveLooks 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 outline-color.)
  • ridgeThe opposite of groove the outline looks as though it were coming out of the canvas.
  • insetThe outline makes the box look as though it were embeded in the canvas.
  • outsetThe opposite of inset the outline makes the box look as though it were coming out of the canvas.
  • inherit
.class {
   outline-style: dashed;
}
1.5+Firefox8+Explorer1+Chrome1.2+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.