The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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



Default. Outline is not drawn, color and width are ignored.

A series of round or square dots.

A series of square-ended dashes.

A single line segment.

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.

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.)

Looks as if it were coming out of the canvas.

Looks as if the content on the inside of the outline is sunken into the canvas.

Looks as if the content on the inside of the outline is coming out of the canvas.

This is a keyword indicating that the value is inherited from their parent's element calculated value.

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.


A simple example showing multiple <span>s.


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

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


  • 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

Specification Status Related Changes
CSS Basic User Interface Module Level 3 (CSS3 UI) Working Draft


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]