CSS Outline

In this chapter, we will learn about the CSS outline property. The outline property is used to draw a line around elements, outside the border edge, to make them stand out. Outlines do not take up space and do not affect the layout of the element. We will cover:

• Introduction to Outlines
• Outline Width
• Outline Style
• Outline Color
• Outline Shorthand Property
• Outline Offset
• Differences Between Border and Outline
• Examples of Using Outline

Introduction to Outlines

An outline is a line drawn around an element, outside its border, to make the element stand out. Unlike borders, outlines do not take up space and do not affect the layout of the element. They are often used for accessibility purposes, such as highlighting focused elements.

Outline Width

The outline-width property sets the width of the outline. It can be specified using various units such as pixels (px), ems (em), or keywords like thin, medium, and thick.

Syntax

element {
  outline-width: value;
}

Example

div {
  outline-width: 2px;
}

Outline Style

The outline-style property sets the style of the outline. There are several predefined styles you can use.

Values

• none: No outline
• solid: A solid line
• dotted: A series of dots
• dashed: A series of dashes
• double: Two solid lines
• groove: A 3D grooved outline
• ridge: A 3D ridged outline
• inset: A 3D inset outline
• outset: A 3D outset outline

Syntax

element {
  outline-style: value;
}

Example

div {
  outline-style: solid;
}

Outline Color

The outline-color property sets the color of the outline. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA.

Syntax

element {
  outline-color: color;
}

Example

div {
  outline-color: blue;
}

Outline Shorthand Property

The outline shorthand property allows you to set the width, style, and color of an element’s outline in one declaration.

Syntax

element {
  outline: width style color;
}

Example

div {
  outline: 2px solid blue;
}

Outline Offset

The outline-offset property adds space between the outline and the edge or border of an element.

Syntax

element {
  outline-offset: value;
}

Example

div {
  outline: 2px solid blue;
  outline-offset: 5px;
}

Differences Between Border and Outline

While both borders and outlines add lines around elements, they have some key differences:

• Placement: Borders are placed inside the element’s margin, while outlines are drawn outside the border edge.
• Space: Borders take up space and affect the element’s size and layout. Outlines do not take up space and do not affect the layout.
• Offset: The outline-offset property allows you to add space between the outline and the element, which is not possible with borders.

Examples of Using Outline

Example 1: Basic Outline

div {
  outline: 2px solid red;
}

HTML

<div>This is a div with a red outline.</div>

Example 2: Outline on Focus

input:focus {
  outline: 2px solid blue;
}

HTML

<input type="text" placeholder="Focus on me to see the outline">

Example 3: Outline with Offset

button {
  outline: 2px dashed green;
  outline-offset: 10px;
}

HTML

<button>Button with Outline Offset</button>

Conclusion

In this chapter, you learned about the CSS outline property, including how to set the outline width, style, color, and offset. You also learned about the differences between borders and outlines. Understanding how to use outlines can help you create visually appealing and accessible web designs.