CSS Tutorial
CSS Outline
An outline is a line drawn around an element, just outside its border. Unlike a border, an outline does not take up space, and it plays an important role in accessibility.
What is an outline?
The outline is a line drawn outside an element's border edge. It looks similar to a border, but with two key differences: it does not affect the element's size or layout, and it can be drawn a small distance away from the element using outline-offset.
Outline properties
Like borders, outlines have a style, width and color, plus the outline shorthand to set them together.
div {
outline-style: solid;
outline-width: 3px;
outline-color: #2b5cff;
}
/* shorthand */
div {
outline: 3px solid #2b5cff;
}Outline vs border
Because an outline does not add to an element's size, adding one will not shift other elements around, whereas a border can. Outlines also cannot have rounded corners in the same way borders do.
| Outline | Border | |
|---|---|---|
| Takes up space | No | Yes |
| Affects layout | No | Yes |
| Per-side control | No | Yes |
| Rounded corners | Limited | Yes (border-radius) |
| Offset support | Yes (outline-offset) | No |
See outline and offset live
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #dbe7ff;
padding: 16px;
margin: 24px;
font-family: Arial, sans-serif;
}
.bordered {
border: 4px solid tomato;
}
.outlined {
outline: 4px solid green;
outline-offset: 6px; /* pushes the outline outward */
}
</style>
</head>
<body>
<div class="bordered">I have a red border.</div>
<div class="outlined">I have a green outline, offset by 6px.</div>
</body>
</html>Outlines and accessibility
When a user tabs through a page with the keyboard, the browser draws a focus outline around the active link or button. This shows keyboard users where they are. Removing it makes a site harder to use.
Never remove focus outlines with outline: none unless you replace them with another clear focus style. Doing so breaks keyboard navigation and hurts accessibility.
Use outline-offset to create a small gap between an element and its outline, which is great for a clean focus ring around buttons.
Key points
- An outline is drawn just outside the border.
- It does not take up space or shift layout.
- Set it with outline (width, style, color).
- outline-offset moves the outline away from the element.
- Focus outlines are vital for keyboard accessibility, do not remove them.