CSS Outline - Detailed Overview

Introduction to CSS Outline

The outline property in CSS is used to create a line around elements, similar to a border but without affecting the element's dimensions or layout. It is useful for accessibility and focus indicators.

Basic Outline Example

The outline property can be defined with a width, style, and color. For example:

div {
    outline: 2px solid #333;
}

Outline Style

Different styles can be applied to the outline, such as solid, dotted, dashed, and double. For example:

div {
    outline: 2px dashed #ff0000;
}

Outline Color

The outline-color property allows you to specify the color of the outline. It can be any valid color value. For example:

div {
    outline: 3px solid;
    outline-color: #00ff00;
}

Outline Offset

The outline-offset property specifies the space between the outline and the edge of the element's border. For example:

div {
    outline: 2px solid #000;
    outline-offset: 10px;
}

Outline vs Border

Unlike borders, outlines do not affect the layout of elements and are not part of the element's dimensions. Here’s a comparison:

.border-box {
    border: 2px solid #333;
}

.outline-box {
    outline: 2px solid #333;
}