CSS outlines add a line outside the element's border. They help highlight parts of your page without affecting the layout. Unlike borders, outlines do not occupy space. They are useful for focusing on elements or improving accessibility.

Using the outline property, you can quickly emphasize an element with a single line. This lesson covers how to set outline properties using both shorthand and individual properties.

Syntax

Follow the code block below to set the outline in CSS:

/* Outline shorthand */
outline: outline-width outline-style outline-color;

/* Individual outline properties */
outline-width: value;
outline-style: value;
outline-color: value;

Explanation:

• outline-width: Sets how thick the outline is (e.g., 2px, medium).
• outline-style: Defines the line style (e.g., solid, dotted, dashed).
• outline-color: Sets the color of the outline (e.g., red, #00f).
• Note: Outlines do not influence the element's size or position because they are drawn outside the element.

Example 1: Simple Outline on an Element

In this example, we add a simple outline to a paragraph using the shorthand property. The outline makes the paragraph stand out without changing its layout.

Explanation:

• Outline:
  • 2px: The outline is 2 pixels thick.
  • dashed: The outline appears as dashed lines.
  • green: The outline color is green.
• Effect:
  • The paragraph is highlighted with an outline without affecting its overall size or spacing.

Example 2: Outline with Focus State

In this example, we add an outline to a button when it receives focus. This technique improves accessibility by providing clear visual feedback when the button is active.

Explanation:

• Normal Button Style:
  • The button is styled without a border for a clean look.
• Focus Outline:
  • 3px: The outline is thicker to attract attention.
  • solid: A solid line is used for clear visibility.
  • blue: The outline color is blue, which stands out against the button background.
• Outcome:
  • When the button receives focus (e.g., through clicking or keyboard navigation), the blue outline appears, making it easy to identify the active element.
  • We will learn more about :focus pseudo classes in the upcoming modules of the course.

This lesson shows how to use CSS outlines to emphasize elements and improve interaction feedback. The outline property is a powerful tool for adding visual cues without altering the page layout.