The CSS outline properties

This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

CSS Outline is a shorthand attribute for drawing a line around the outside of an element. It is especially useful when used in combination with the A: Focus selector to put more emphasis on links or other elements.

Outline is similar to border except that outline draws a line around the entire element; It cannot specify an outline on a face of an element, as border does, i.e. the top, right, bottom, or left cannot be set separately.

grammar

outline: width | style | color
Copy the code

Outline shorthand properties can be declared with one, two, or three values, and their order can be arbitrarily reversed. Such as:

outline: solid; /* This specifies only the style value */
​
outline: dashed #eee; /* This specifies the color value and the style value */
​
outline: thick inset; /* This specifies the width and style values */
​
outline: 1px solid pulm; /* This will specify all three values */
Copy the code

Two things to note here:

• When only one or two values are specified, the other values are resolved to their default values.outlineJust set itstyleValues work.
• If no style is defined, the Outlines of many elements will not be visible. This is because the style defaults tonone. One exception isinputElements, which are given default styles by the browser.

attribute

The outline property is an abbreviation of three separate properties that define the color, width, and style of the outline. We will explore each of them below.

outline-width

Outline -width Defines the thickness of the line to be drawn. The value can be any length value or any of the following keywords:

• thin
• medium(Default)
• thick

outline-width: 2(px, em, rem) | thin | medium | thick     
Copy the code

outline-style

Outline -style defines 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(Default value, no outline)

outline-style: auto | dotted | dashed | solid | double | groove | ridge | inset | outset
Copy the code

outline-color

Outline -color Sets the color of the text and decoration parts of the outline. It can be specified by keywords, hexadecimal values, RGB/RGBA values, and HSL/HSLA values.

If the browser supports it, the default is invert; Otherwise, it defaults to currentColor.

outline-color: currentColor | red | #eee | rgb(255.255.255) | hsl(0.0.0)
Copy the code

Interesting usage

Try opening a console on any web site and running the following:

document.head.insertAdjacentHTML('beforeend'.'<style>* { outline: 1px solid plum; }</style>')
Copy the code

You’ll see a lot of websites that look like this:

By default, outline is used for the: Focus style. Remember that if you delete the outline style, for example: a:focus {outline: 0; }, you need to add them back with other visually different styles.