The CSS outline
shorthand property is used to draw a line around the outside of an element. It is especially useful in conjunction with the a:focus
selector to add more emphasis on links or other elements.
Jump ahead:
At first, it may seem that outline
is similar to border
. The difference, however, is that outline
draws a line around the entire element; you cannot specify the sides on which to draw lines. Also, unlike border
, outline
is not part of the box model since the line is drawn outside of the element.
Demo
See the Pen
CSS Outline Example by Solomon Eseme (@kaperskyguru)
on CodePen.
Syntax
outline: color | style | width
The outline
shorthand property can be declared with one, two, or three values. For example:
outline: solid; // This specifies only the STYLE value outline: #eee dashed; // This specifies the COLOR value and STYLE value outline: inset thick; // This specifies the STYLE value and WIDTH value outline: green solid 2px; // This specifies all 3 values
It’s important to note that when only one or two values are specified, the other value(s) will resolve to their default values. An outline only needs its style
value to be set in order to work.
Component properties
The outline
property is a shorthand made up of three individual properties to define the color, width, and style of an outline. We explore each below.
outline-color
Sets the color of the textual and decorative parts of the outline. It can be specified via keywords, hex values, RGB/RGBA values, and HSL/HSLA values.
Its default value is invert
if the browser supports it; otherwise, its default value is currentColor
.
outline-color: currentColor | red | #eee | rgb(255, 255, 255) | hsl(0,0,0)
outline-style
Specifies the type of line to be drawn. Its value can be any of the following keywords:
auto
dotted
dashed
solid
double
groove
ridge
inset
outset
none
(no outline)
Its default value is none
.
outline-style: auto | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width
Specifies the thickness of the line to be drawn. Its value can be any length value, or any of the following keywords:
thin
medium
thick
Its default value is medium
.
outline-width: 2(px, em, rem) | thin | medium | thick
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.