CSS outline-styleProperty
Example
Set the outline style:
p
{
outline-style:dotted;
}
{
outline-style:dotted;
}
Try it Yourself »
More examples at the bottom of this page.
Property definition and usage instructions
Outline (contour) is a line drawn around an element, located outside the border edge.
The outline-style property specifies the style of the outline.
| Default value: | none |
|---|---|
| Inherited: | no |
| version: | CSS2 |
| JavaScript Syntax: | object.style.outlineStyle="dotted" |
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Tips and notes
The outline is drawn around the element. It surrounds the element's margin. However, it is a different property from the border property.
The outline is not part of the element's dimensions, so the element's width and height properties do not include the outline's width.
Property value
| Value | Description |
|---|---|
| none | Default. Defines no outline. |
| dotted | Defines a dotted outline. |
| dashed | Define dashed outline. |
| solid | Define solid outline. |
| double | Defines a double-line outline. The width of the double line is equal to the value of outline-width. |
| groove | Defines a 3D grooved outline. This effect depends on the outline-color value. |
| ridge | Defines a 3D ridged outline. This effect depends on the outline-color value. |
| inset | Defines a 3D inset outline. This effect depends on the outline-color value. |
| outset | Defines a 3D outset outline. This effect depends on the outline-color value. |
| inherit | Specifies that the outline style settings should be inherited from the parent element. |
More Examples
Set the outline style
This example demonstrates how to set the outline style.
Related Articles
CSS Tutorial:CSS Outline
CSS Reference Manual:outline property
other extensions