CSS/Properties/outline-style

From W3C Wiki
< CSS‎ | Properties
Revision as of 17:59, 16 June 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

outline-style

The outline-style property specify the line style of the outline of a box. This property accepts the same values as 'border-style', except that 'hidden' is not a legal outline style.

Description

Values [none | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
Initial value none
Applies to all elements
Inherited No


Values

  • none
    No border.


  • dotted
    The border is a series of dots.


  • dashed
    The border is a series of short line segments.


  • solid
    The border is a single line segment.


  • double
    The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.


  • groove
    The border looks as though it were carved into the canvas.


  • ridge
    The opposite of 'groove': the border looks as though it were coming out of the canvas.


  • inset
    The border makes the box look as though it were embedded in the canvas.


  • outset
    The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 h1 {
   outline-width: 1px;
   outline-style: solid;
 }

[index.html]

  <body>
    <h1>CSS outline property example</h1>
  </body>

Csslist2 outline.png

CSS Reference

The CSS specification defines the outline-style property in 18.4 Dynamic outlines.