Outline Properties
CSS outline properties control the outer border of an element, similar to borders but without affecting layout size. They are often used for accessibility and focus indicators.
| Property | Possible Values | Description |
|---|---|---|
outline | width style color | Shorthand for setting outline properties |
outline-width | thin, medium, thick, px, em | Sets the thickness of the outline |
outline-style | solid, dashed, dotted, double, groove, ridge, none | Defines the style of the outline |
outline-color | color name, hex, rgb, transparent | Specifies the color of the outline |
outline-offset | px, em | Adds space between the outline and the element's border |
Explanation of Values
| Value Type | Description | Example |
thin, medium, thick | Predefined widths | outline-width: thick; |
px, em | Custom width values | outline-width: 5px; |
solid | Continuous line | outline-style: solid; |
dashed | Dashed outline | outline-style: dashed; |
dotted | Dotted outline | outline-style: dotted; |
double | Double-line outline | outline-style: double; |
outline-offset | Moves outline away from the border | outline-offset: 4px; |
Example
button {
outline: 2px dashed red;
outline-offset: 5px;
}