← Back to Chapters

CSS Outline

?️ CSS Outline

⚡ Quick Overview

  • outline draws a line around an element, outside the border.
  • It is often used for focus states (e.g., on buttons and form controls).
  • It does not change the element’s size or push other elements around.
  • You can control width, style, color, and spacing using outline-offset.

? Key Concepts

  • Outline vs Border: Borders are part of the element box; outlines sit outside and don’t consume space.
  • Accessibility: Default outlines help keyboard users see focus — avoid removing them without a good replacement.
  • Shorthand: outline can set width, style, and color in a single declaration.
  • Offset: outline-offset moves the outline away from the element for a glowing-ring effect.

? Syntax & Theory

The most common way to use outlines is with the outline shorthand:

? View Basic Outline Syntax 
/* Shorthand: width style color */
selector {
  outline: 2px solid #333;
}

You can also control each part individually:

? View Individual Outline Properties 
/* Individual outline-related properties */
selector {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: #2563eb;
  outline-offset: 4px;
}

? Code Examples

? View CSS Outline Examples 
/* Solid outline around a container */
.container-box {
  padding: 16px;
  border: 1px solid #e5e7eb;
  outline: 2px solid #333;
}

/* Dashed blue outline for emphasis */
.dashed-outline {
  padding: 16px;
  outline: 3px dashed #007bff;
  outline-offset: 4px;
}

/* Focus outline for an accessible button */
button:focus {
  outline: 3px solid #22c55e;
  outline-offset: 3px;
}
? View HTML Structure Used 
<!-- HTML elements that will use the outlines above -->
Basic container with solid outline
Dashed outline with offset

? Live Output & Explanation

? Demo Box with Outline

This box has a 5px solid red outline with a 10px outline-offset, creating a gap between the element and the outline.

In this example, the outline sits outside the element’s border. The outline-offset property adds space between the element edge and the outline, which can create a highlight effect without touching the element directly.

? Outline Properties

Here are the most commonly used outline-related properties:

Property Description Example Value
outline Shorthand to set width, style, and color at once. 2px solid #333
outline-width Controls the thickness of the outline. 1px, 2px, 5px
outline-style Controls the visual style of the line. solid, dashed, dotted
outline-color Controls the color of the outline. #333, red, rgba(0, 0, 0, 0.2)
outline-offset Adds space between the element and its outline. 4px, 8px

? Helpful Tips

  • Prefer using the browser’s default focus outline for accessibility, or replace it with a clearly visible custom outline.
  • Use outline-offset to create a “glow” or halo effect without touching the element itself.
  • Keep outlines high-contrast so they stand out against the background.
  • Use the outline shorthand for concise, readable CSS when setting width, style, and color together.

? Practice Tasks

  1. Create a button that uses outline instead of border. Experiment with solid, dashed, and dotted styles.
  2. Add a focus outline to input fields using input:focus. Try different outline-width and outline-color values.
  3. Build a card component and use outline-offset to show a hover outline that appears slightly away from the card.
  4. Combine border and outline to create layered effects (e.g., thin border + thicker offset outline).