This tutorial helps you learn how to define an outline for an element using CSS.
It lets you define an outline area around the box of an element.
An outline is a line drawn just outside the element's border edge. Outlines typically indicate an element's active or focus state, such as buttons, links, form fields, etc.
The section below describes how to set the outline's style, color, and width.
Although an outline is similar to the border in looks, however, it differs from the border in the following ways:
Note: An outline on an element takes up equal space on the web pages as if the element has no outline because it overlaps margins (transparent area outside of the border) and surrounding elements.
You can use the outline-style property for setting the style of an element's outline, such as solid, dotted, etc.
An outline-style can have one of the following values: none, solid, dotted, dashed, double, outset, inset, ridge, and groove. Now, consider the following example; it helps you understand the differences between the outline style types.
When you set the value none, it will display no outline. The values inset, outset, groove, and ridge create a 3D-like effect that depends on the outline-color value. It is achieved by creating a "shadow" from two colors that are slightly lighter and darker than the outline color.
The below example will help you understand how it works:
Example:
h1 {
outline-style: dotted;
}
p {
outline-style: ridge;
}Note: An outline style must be specified to make the outline appear around an element, as the default outline style is none. The width and thickness of a default outline are medium, and the color of the default outline is the same as the color of the text.
You can use the outline-width property to specify the width of the outline to be added to an element.
Let's take the following example to see how it actually works:
Example :
p {
outline-style: dashed;
outline-width: 10px;
}Tip: You can specify the outline width using any length value, such as px, em, rem, etc. You can also specify using one of the three keywords: thick, medium, and thin. However, you cannot set percentage or negative values like the border-width property.
You can use the outline-color property to set the color of the outline.
The outline-color property accepts the same values as the ones used for the color property.
You can use the following style rules to add a solid outline of blue color around the paragraphs.
Example:
p {
outline-style: dashed;
outline-width: 10px;
outline-color:red;
}Note: The CSS outline-color or outline-width property does not work if used alone. You should use the outline-style property for setting the outline style first.
It is a shorthand property to set one or more of the individual outline properties outline-width, outline-color, and outline-style in a single rule.
Consider the following example to see how it works:
p {
outline: 5px solid #ff00ff;
}If the individual outline property's value is omitted or not specified while setting the outline shorthand property, then, in that case, the default value for that property will be used instead, if any.
For example, suppose the value for the outline-color property is missing or not specified when setting the outlines. Then the color property of the element will be used as the value for the outline color.
In the example here, the outline will be a solid green line of 5px width:
Example:
p { color: green; outline: 5px solid; }But, in the outline-style case, omitting the value will cause no outline to show because this property's default value is none. In the below-mentioned example, there will be no outline:
Example:
p {
outline: 5px #00ff00;
}You can use the outline property to remove the outline around active links.
However, you are advised to apply some alternative styles to indicate that the link has a focus.
Example:
a, a:active, a:focus {
outline: none;
}