CSS outline Property
Description
The outline
property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.
- Initial value
- Based on individual properties
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- No
- CSS Version
- CSS2, CSS3
- JavaScript syntax
- object.style.outline
Syntax
outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit
Values
- <outline-color>See the outline-color CSS property for values.
- <outline-style>See the outline-style CSS property for values.
- <outline-width>See the outline-width CSS property for values.
- inherit
Example
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
.block {
outline: 3px dotted blue;
padding: 10px;
}
Browser Support
Desktop | |||||
8 | 12 | 1 | 1.5 | 7 | 1.2 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 3rd November 2019