Contents
Defining the outline in CSS
To draw an outline around an element, you need to use the outline CSS property:
CSS outline property syntax
This property is actually a shorthand for three subproperties that define an outline in CSS:
outline-widthoutline-styleoutline-color
As with all CSS shorthands, you need to omit the names of the subproperties and only list their values:
outline: width style color;
| Subproperty | Default value | Definition |
|---|---|---|
outline‑width |
medium |
CSS outline thickness defined in keywords (thin, medium, or thick) or length units |
outline‑style |
none |
CSS outline style defined in keywords (auto, none, dotted, dashed, solid, double, groove, ridge, inset, or outset) |
outline‑color |
currentColor or invert |
CSS outline color defined in keywords (currentColor, or invert), color names, RGB, RGBA, HEX, HSL or HSLA values |
Border and outline in CSS
An outline is similar to a border – however, there are a few differences. Unlike borders, outlines do not take up space in CSS. They also don't have to be rectangle-shaped.
One element can have both a border and an outline in CSS. You can specify the offset between them by using the outline-offset property:
Example
div {
border: 1px solid green; /* Set border properties */
outline: 1px solid hotpink; /* Set outline properties */
outline-offset: 15px; /* Set the distance between the outline and border*/
}Browser support
Chrome
1+
Edge
12+
Firefox
1.5+
IE
8+
Opera
7+
Safari
1.2+
Mobile browser support
Chrome
18+
Firefox
4+
Opera
10.1+
Safari
3.1+