The CSS outline properties enable you to create an outline area around an element's box.
An outline is a line drawn just beyond the border edge of elements. It's commonly used to indicate focus or active states of elements like buttons, links, and form fields.
This section explains how to specify the style, color, and width of the outline.
An outline resembles a border, but it has some differences:
Note: Placing an outline on an element occupies the same space on web pages as if no outline were present. This is because it overlaps margins (the transparent area outside the border) and surrounding elements.
The outline-style property determines the style of an element's outline, such as: solid, dotted, etc.
The outline-style property can be one of these values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge. Let's check the illustration below to see the distinctions between outline style types.
The value none hides the outline. Values like inset, outset, groove, and ridge create a 3D appearance based on the outline-color. This effect simulates a "shadow" using two colors slightly lighter and darker than the outline color.
Let's try the following example to see how it functions:
h1 {
outline-style: dotted;
}
p {
outline-style: ridge;
}
Note: To display the outline around an element, you need to specify an outline style because the default style is none. The default outline width is medium, and the default outline color matches the text color.
The outline-width property sets the width of the outline on an element.
Let's try the following example to see it in action:
p {
outline-style: dashed;
outline-width: 10px;
}
Tip: You can specify the outline width using various length units like px, em, rem, etc. You can also use thin, medium, or thick. Percentage or negative values aren't allowed, just like the border-width property.
The outline-color property determines the color of the outline.
This property accepts the same values as the ones used for the color property.
The following style rules create a solid blue outline around paragraphs:
p {
outline-style: solid;
outline-color: #0000ff;
}
Note: The CSS outline-width or outline-color property doesn't work alone. You need to use the outline-style property first to set the outline's style.
The outline CSS property is a shorthand for setting one or more of the individual outline properties outline-style, outline-width, and outline-color in a single rule.
Let's see an example of how it works:
p {
outline: 5px solid #ff00ff;
}If an individual outline property's value is omitted when using the shorthand property, the default value for that property will be used, if any.
For example, if the value for the outline-color property is missing, the element's color property will be used instead.
In the following example, the outline will be a solid green line with a width of 5px:
p {
color: green;
outline: 5px solid;
}However, omitting the value for outline-style will result in no outline at all, as the default value for this property is none. In the example below, there will be no outline:
p {
outline: 5px #00ff00;
}The outline property is commonly used to remove the outline around active links.
However, it's advisable to apply an alternative style to indicate that the link is focused.
Let's try the following example to see how it's done:
a, a:active, a:focus {
outline: none;
}