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
