Set an outline around a <h2> element and a <div> element:
h2 {
outline: 5px dotted green;
}div.a {
outline: 2px dashed blue;
}
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 setting the following individual outline properties:
- outline-width
- outline-style (required)
- outline-color
The outline property is specified as one, two, or three values from the list above.
Note: The outline is not a part of the element’s dimensions, therefore the element’s width and height properties do not contain the width of the outline.
| Default value: | medium invert none |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable – Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.outline=”#0000FF dotted 5px”Try it |
CSS Syntax
outline: outline-width outline-style outline-color|initial|inherit;
Property Values
| Value | Description |
|---|---|
| outline-width | Specifies the width of outline |
| outline-style | Specifies the style of the outline |
| outline-color | Specifies the color of the outline |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
