CSS Outline

In this tutorial, we will explore the CSS outline property, which is used to add an outline or border around an element. Outlines can be used for a variety of purposes, such as highlighting a focused element or creating a design effect.
 

What is CSS Outline

The outline property in CSS is used to add an outline or border around an element. It is often used to visually highlight an element, especially when it gains focus, such as during keyboard navigation. Unlike the border property, the outline does not affect the layout of the element and does not take up any space.
 

Basic Usage

The basic syntax of the outline property is as follows:
selector { outline: [width] [style] [color]; } 

width (optional): Specifies the width of the outline. It can be a length value (e.g., 2px) or one of the following keywords: thin, medium, or thick.

style (optional): Defines the style of the outline. It can be one of the following values: dotted, dashed, solid, double, groove, ridge, inset, outset, or none.

color (optional): Sets the color of the outline. You can use color names, hexadecimal values, RGB values, or other valid color representations.

Here's an example of the basic usage:

button { 
          outline: 2px solid #007bff; 
} 

In this example, we are adding a blue solid outline with a width of 2 pixels to all <button> elements.

Outline Width

The outline-width property allows you to set the width of the outline independently. This property can be used when you want to adjust the thickness of the outline without affecting the style or color.

selector { 
          outline-width: 3px; 
} 

In this example, we are setting the outline width to 3 pixels.

Outline Color

The outline-color property is used to specify the color of the outline independently.

selector { 
          outline-color: red; 
} 

In this example, we are setting the outline color to red.

Outline Style

The outline-style property allows you to set the style of the outline independently.

selector { 
          outline-style: dashed; 
} 

In this example, we are setting the outline style to be dashed.

Outline Shorthand

You can use the shorthand outline property to set all the outline properties (width, style, and color) in one declaration.

selector { 
          outline: 2px dotted green; 
} 

In this example, we are setting a green dotted outline with a width of 2 pixels.

Outline Offset

The outline-offset property controls the space between the outline and the element's border or content. It can be used to create spacing between the element and its outline.

selector { 
          outline-offset: 10px; 
} 

In this example, we are adding a 10-pixel spacing between the element and its outline.

Customizing Outlines

Here are some examples of how to customize outlines for specific use cases:

Highlighting Focused Elements

input:focus { 
          outline: 2px solid #ff6600; 
} 

In this example, we are adding an orange solid outline to input elements when they receive focus.

Removing Outlines for Clickable Elements

a, button, input[type="submit"] { 
          outline: none; 
} 

This CSS rule removes outlines from anchor links, buttons, and submit inputs. However, it's essential to provide alternative focus indicators for accessibility when you remove outlines.

Summary

The outline property in CSS is a valuable tool for adding outlines or borders to elements without affecting layout. You can customize the width, style, color, and offset of outlines to achieve various design and accessibility goals. Remember to use outlines thoughtfully, ensuring your web pages remain accessible to all users, including those with disabilities who rely on keyboard navigation.