CSS outline Property
Example
Set an outline around a <h2> element and a <div> element:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
Try it Yourself »
Definition and Usage
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
The outline
property is a shorthand property for:
- outline-width
- outline-style (required)
- outline-color
If outline-color is omitted, the color applied will be the color of the text.
Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
Default value: | medium invert color |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS2 |
JavaScript syntax: | object.style.outline="#0000FF dotted 5px" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
CSS Syntax
outline: outline-width outline-style outline-color|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
outline-width | Specifies the width of outline | Try it » |
outline-style | Specifies the style of the outline | Try it » |
outline-color | Specifies the color of the outline | Try it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS Outline
HTML DOM reference: outline property