CSS Reference Guide: outline

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:

• Demo
• Syntax
• Component properties
  • outline-color
  • outline-style
  • outline-width

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:

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

• 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.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. 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 apps — Start monitoring for free.