This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

outline-style

Summary

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.

Overview table

Initial value
none
Applies to
All elements
Inherited
No
Media
visual
Computed value
Specified value
Animatable
No
CSS Object Model Property
outlineStyle
Percentages
N/A

Syntax

  • outline-style: auto
  • outline-style: dashed
  • outline-style: dotted
  • outline-style: double
  • outline-style: groove
  • outline-style: inherit
  • outline-style: inset
  • outline-style: none
  • outline-style: outset
  • outline-style: ridge
  • outline-style: solid

Values

none
Default. Outline is not drawn, color and width are ignored.
dotted
A series of round or square dots.
dashed
A series of square-ended dashes.
solid
A single line segment.
double
Outline is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the outline-width value. The border width must be at least 3 pixels wide to draw a double outline.
groove
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 outline-color.)
ridge
Looks as if it were coming out of the canvas.
inset
Looks as if the content on the inside of the outline is sunken into the canvas.
outset
Looks as if the content on the inside of the outline is coming out of the canvas.
inherit
This is a keyword indicating that the value is inherited from their parent’s element calculated value.
auto
Defined by the user agent (browser). Currently supported only in WebKit. This value allows user-agents to draw focus outlines on elements in an appropriate platform-native style, or in some other appropriate style if there is no platform-native style.

Examples

A simple example showing multiple <span>s.

<div class="all">
<p>
      <span class="one">One</span>
    </p>
    <p>
      <span class="two">Two</span>
    </p>
    <p>
      <span class="three">Three</span>
    </p>
    <p>
      <span class="four">Four</span>
    </p>
    <p>
      <span class="five">Five</span>
    </p>
    <p>
      <span class="six">Six</span>
    </p>
    <p>
      <span class="seven">Seven</span>
    </p>
    <p>
      <span class="eight">Eight</span>
    </p>
    <p>
      <span class="nine">Nine</span>
    </p>
</div>

View live example

Outline styles in CSS.

.all {
  background-color: lightgrey;
}

.all p {
  padding: 20px;
}

.all span {
  padding: 10px;
  margin: 10px 10px 10px 10px;
  font-size: 36px;
  font-family: Bitter;
  outline-width: 5px;
}

.all .one {
  outline-style: none;
}

.all .two {
  outline-style: outset;
}

.all .three {
  outline-style: dotted;
}

.all .four {
  outline-style: dashed;
}

.all .five {
  outline-style: solid;
}

.all .six {
  outline-style: double;
}

.all .seven {
  outline-style: groove;
}

.all .eight {
  outline-style: ridge;
}

.all .nine {
  outline-style: inset;
}

View live example

Notes

  • This property accepts the same values as border-style, except that ‘hidden’ is not a legal outline style.
  • The outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Related specifications

CSS Basic User Interface Module Level 3 (CSS3 UI)
Working Draft

Attributions