CSS Outline
Learn how to use CSS outline properties for focus indicators and decorative effects
What is CSS Outline?
CSS outline is a line that is drawn around elements, outside the borders, to make the element stand out. Unlike borders, outlines do not take up space and do not affect the layout of the page.
Outline Properties:
- outline - Shorthand for all outline properties
- outline-width - Sets the thickness of the outline
- outline-style - Sets the style of the outline
- outline-color - Sets the color of the outline
- outline-offset - Sets the space between the outline and the element
Outline in Action
Example Code
/* Outline Properties */
.element {
/* Shorthand outline property */
outline: 3px solid red;
/* Individual outline properties */
outline-width: 3px;
outline-style: solid;
outline-color: red;
/* Outline offset */
outline-offset: 5px;
/* Removing outline */
outline: none;
}
/* Outline styles */
.styles {
outline-style: solid; /* Solid line */
outline-style: dashed; /* Dashed line */
outline-style: dotted; /* Dotted line */
outline-style: double; /* Double line */
outline-style: groove; /* 3D grooved */
outline-style: ridge; /* 3D ridged */
outline-style: inset; /* 3D inset */
outline-style: outset; /* 3D outset */
}
/* Focus styles for accessibility */
button:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
/* Removing default focus outline (use with caution) */
button:focus {
outline: none;
/* Always provide alternative focus indicator */
box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.5);
}Outline vs Border: Key Differences
Borders
- Part of the box model
- Affects layout and element dimensions
- Can be applied to individual sides
- Can have rounded corners with border-radius
- Participates in box-sizing calculation
- Renders inside the element
Outlines
- Not part of the box model
- Does not affect layout or dimensions
- Always applies to all sides
- Cannot have rounded corners
- Not included in box-sizing
- Renders outside the element
When to use each: Use borders for structural styling and outlines for focus indicators or temporary highlighting without affecting layout.
Outline Properties in Detail
Outline Width
The outline-width property sets the thickness of the outline. It accepts length values or keywords.
Outline Style
The outline-style property sets the style of the outline. It accepts the same values as border-style.
Outline Color
The outline-color property sets the color of the outline. It accepts all CSS color values.
Outline Shorthand
The outline shorthand property combines width, style, and color in one declaration.
Outline Offset
The outline-offset property sets the amount of space between an outline and the edge or border of an element. This property accepts positive and negative values.
Positive Values
Positive values push the outline outward, creating space between the element and its outline.
Negative Values
Negative values pull the outline inward, causing it to overlap the element.
Accessibility and Focus Indicators
Outlines are crucial for accessibility as they provide visual indicators for focused elements, helping keyboard users navigate through interactive elements on a page.
Default Focus Styles
Browsers provide default focus outlines for interactive elements. These are essential for accessibility.
Custom Focus Indicators
If you remove the default outline, always provide an alternative focus indicator for accessibility.
Important: Never remove focus indicators without providing an alternative visible focus style. This is essential for accessibility and required by WCAG guidelines.