CSS Outline

The CSS Outline property is used to draw a line around elements, outside of the border edge. It is often used for accessibility purposes, such as focusing on form elements or links.

Understanding the Outline Property

Unlike borders, outlines do not take up space and are not affected by the element’s box model. They are drawn outside of the element's border edge and do not affect layout.

Syntax

The syntax for the CSS outline property is:


/* Outline Property Syntax */
outline: <color> <style> <width>;

Color: Specifies the color of the outline. Default is the color of the text.
Style: Defines the style of the outline. Common values are solid, dashed, dotted, etc. Default is none.
Width: Sets the thickness of the outline. It can be specified in units like px, em, etc. Default is medium.

Examples

Example 1: Basic Outline


/* Basic Outline */
.example1 {
    outline: 2px solid #ff0000;
}

This element has a black solid outline.

Example 2: Dotted Outline


/* Dotted Outline */
.example2 {
    outline: 3px dotted #00ff00;
}

This element has a black dotted outline.

Example 3: Focus Outline


/* Focus Outline */
.focus-example:focus {
    outline: 3px dashed #0000ff;
}