outline-style

Jump to: navigation, search

outline-style

This article is Ready to Use.


W3C Working Draft

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

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.5
Yes
8.0
Yes
7.0
Yes
1.2
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


Examples

View live exampleA simple example showing multiple <span>s.

HTML

<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 exampleOutline styles in CSS.

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;
}

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

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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1
1.5
1 -moz
8
7
1.2

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

Attribution

This article contains content originally from external sources.

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