CSS outline-style Property
Description
The outline-style CSS property specifies the style of an element's outline. An outline is a line that is drawn around an element, outside the border, to make it stand out. The outline-style property can be used to create a variety of different outline styles, such as solid, dotted, dashed, double, and inset.
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.outlineStyle
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.
Syntax
outline-style: auto | <border-style> | inherit
Values
- noneOutline is not drawn, color and width are ignored.
- dottedA series of round or square dots.
- dashedThe outline is a series of short line segments.
- solidThe outline is a single line.
- doubleThe outline is two single lines. The outline-width is the sum of the two lines and the space between them.
- grooveLooks as if it were carved in the canvas. (This is typically achieved by creating a "shadow" from two colors that are slightly lighter and darker than the outline-color.)
- ridgeThe opposite of groove the outline looks as though it were coming out of the canvas.
- insetThe outline makes the box look as though it were embeded in the canvas.
- outsetThe opposite of inset the outline makes the box look as though it were coming out of the canvas.
- 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-style: dotted;
outline-width: 3px;
outline-color: blue;
padding: 10px;
}Browser Support
The following table will show you the current browser support for the CSS outline-style property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1.5 | 7 | 1.2 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 1 | 1 | 37 |
Last updated by CSSPortal on: 2nd January 2024