CSS Outline

This tutorial helps you learn how to define an outline for an element using CSS.

CSS Outline Properties

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.

Outlines Vs Borders

Although an outline is similar to the border in looks, however, it differs from the border in the following ways: 

• Since outlines are always placed on the top of the element box, they do not take up space, which may cause them to overlap other elements on the page. 
• Unlike borders, you can not use outlines to set each edge to a different width or set different styles and colors for each edge. The outline is the same on all sides.
• Apart from overlapping, there is no other impact of outlines on surrounding elements. Unlike borders, outlines do not change an element's size or position.
• Although outlines may be non-rectangular, but circular outlines cannot be created.

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.

Understanding the Different Outline Styles

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;
}

Try With Example

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.

Setting the Outline Width

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;
}

Try With Example

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.

Specifying the Outline Color

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;
}

Try With Example

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.

The Outline Shorthand Property

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;
}

Try With Example

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; }

Try With Example

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;
}

Try With Example

Removing Outline Around Active Links

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;
}

Try With Example