Outline
CSS Outline Properties
The CSS outline properties allow you to define an outline area around an element's box.
An outline is a line that is drawn just outside the border edge of the elements. Outlines are
generally used to indicate focus or active states of the elements such as buttons, links,
form fields, etc.
An outline looks very similar to the border, but it differs from border in the following ways:
• Outlines do not take up space, because they always placed on top of the box of the
element which may cause them to overlap other elements on the page.
• Unlike borders, outlines won't allow us to set each edge to a different width, or set
different colors and styles for each edge. An outline is the same on all sides.
• Outlines do not have any impact on surrounding elements apart from overlapping.
• Unlike borders, outlines do not change the size or position of the element.
• Outlines may be non-rectangular, but you cannot create circular outlines.
Understanding the Different Outline Styles
Outline-style property sets the style of an element's outline such as: solid, dotted, etc.
The outline-style property can have one of the following values : none, solid, dashed,
dotted, double, inset, outset, groove, and ridge. Now, let's take a look at the following
illustration, it gives you a sense of the differences between the outline style types.
The value none displays no outline. The values inset, outset, groove, and ridge creates a
3D like effect which essentially depends on the outline-color value. This is typically
achieved by creating a "shadow" from two colors that are slightly lighter and darker than
the outline color.
h1 {
outline-style: dotted;
}
p{
outline-style: double;
}
Outline Width
The outline-width property specifies the width of the outline to be added on an element.
Let's try out the following example to understand how it actually works:
p{
outline-style: dashed;
outline-width: 10px;
}
Outline Color
The outline-color property sets the color of the outline.
This property accepts the same values as those used for the color property.
The following style rules adds a solid outline of blue color around the paragraphs.
p{
outline-style: solid;
outline-color: #0000ff;
}
The Outline Shorthand Property
The outline CSS property is a shorthand property for setting one or more of the individual
outline properties outline-style, outline-width and outline-color in a single rule.
p{
outline: 5px solid #ff00ff;
}
For instance, if the value for the outline-color property is missing or not specified when
setting the outlines, the element's color property will be used as the value for the outline
color.
p { color: green; outline: 5px solid; }
