CSS - Outlines

Ethan D. -

Introduction to Outlines

In CSS, outlines are lines drawn around elements, outside the borders, to make the elements noticeable. Outlines are often used to highlight elements for accessibility or to create a visual distinction without affecting the size or layout of the element.

One key difference between outlines and borders is that outlines do not take up space in the document flow. This means that adding an outline to an element does not affect its position or the position of other elements around it. Borders, on the other hand, are part of the element's box model and take up space, affecting both size and layout.

Outlines are important in web design for several reasons:

  1. Accessibility: Outlines can indicate which element has focus, making it easier for users navigating with a keyboard to know their location on the page.

  2. Highlighting: Outlines can draw attention to specific elements without changing their size or position, making them useful for creating visual hierarchies and guiding users through content.

  3. Styling flexibility: Because outlines do not affect size or position, they can add decorative styles without disrupting page layout.

Example: HTML code with extra spaces

<p>This    is   a   paragraph   with    extra   spaces.</p>

When a browser renders this code, it will display the text as:

This is a paragraph with extra spaces.

Example: Mismatched tags

<p>This is a paragraph.</div>

In this case, the opening <p> tag is closed with a </div> tag, which is incorrect. The right way to close the paragraph is:

<p>This is a paragraph.</p>

In this guide, you will learn about various CSS properties used to control outline appearance and see how they can improve design and usability of web pages.

Outline Properties

CSS provides several properties to control the appearance and behavior of outlines. These properties allow you to set the style, color, width, and offset of an outline.

outline-style

The outline-style property sets the style of an outline. It can have one of these values:

  • solid: A solid outline.
  • dotted: A dotted outline.
  • dashed: A dashed outline.
  • double: A double outline.
  • groove: A 3D grooved outline.
  • ridge: A 3D ridged outline.
  • inset: A 3D inset outline.
  • outset: A 3D outset outline.

The default value is none, which means no outline is displayed.

Example: Using different styles

.solid {
  outline-style: solid;
}

.dotted {
  outline-style: dotted;
}

.dashed {
  outline-style: dashed;
}

Outline Color

The outline-color property sets the color of an outline. You can specify the color using various formats:

  • Color names: 

    outline-color: red;

  • RGB values:

    outline-color: rgb(255, 0, 0);

  • HEX values:

    outline-color: #ff0000;

If no color is specified, it inherits from the element's color property.

Example: Setting colors

.red-outline {
  outline-color: red;
}

.blue-outline {
  outline-color: #0000ff;
}

Outline Width

The outline-width property sets thickness for outlines. You can use length units such as pixels (px), ems (em), or rems (rem) to specify width.

Default value is medium, typically around three pixels. Minimum value is zero with no maximum limit.

Example: Setting widths

.thin-outline {
  outline-width: 1px;
}

.thick-outline {
  outline-width: 0.5em;
}

Outline Offset

The outline-offset creates space between element & its outlines accepting positive/negative values using length units.

Positive offsets outside elements while negative offsets inside elements.

Example: Setting offsets

.offset-outside {
  outline-offset: 5px;
}

.offset-inside {
  outline-offset: -2px;
}

You can combine this with other properties creating interesting effects.

Shorthand Property

The shorthand allows setting multiple properties in single declaration order being:

outline: [width] [style] [color];

Example: Using shorthand property

.shorthand-example {
  outline: 2px dashed blue;
}