CSS Box Model
CSS Outline
Draw non-layout outlines for focus and emphasis, control their offset, and preserve accessible keyboard focus indicators.
The CSS Outline property is used to draw a line outside an element’s border.
It is similar to a border, but with some key differences:
- It does not take up space (does not affect layout)
- It appears outside the border
- It is often used for highlighting elements, especially for focus states
Syntax
css
selector {
outline: width style color;
}Example
css
p {
outline: 2px solid red;
}👉 This adds a 2px red outline outside the element.
Attributes
| Property | Description | Example |
|---|---|---|
| outline | Sets all outline properties | outline: 2px solid black; |
| outline-width | Sets thickness of outline | outline-width: 3px; |
| outline-style | Defines outline style | outline-style: dashed; |
| outline-color | Sets outline color | outline-color: red; |
| outline-offset | Adds space between border and outline | outline-offset: 5px; |
Outlines and keyboard focus
Outlines are drawn outside the border edge and do not change layout dimensions. That makes them suitable for focus indicators, especially when paired with outline-offset. Avoid removing the browser outline unless the replacement is at least as visible across light, dark, and forced-color modes. Unlike borders, an outline does not support independently styled sides and may follow a non-rectangular border radius differently between browsers. The supporting concepts are explained in CSS Border and Accessible CSS.
Example
Complete CSS Outline Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Outline Example</title>
<style>
div {
border: 2px solid blue;
outline: 3px dashed red;
outline-offset: 5px;
padding: 10px;
}
p {
outline: 2px solid green;
}
</style>
</head>
<body>
<div>This div has both border and outline.</div>
<p>This paragraph has an outline.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| outline-style | 1 | 12 | 1 | 1.2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Outline does not take up space (unlike border)
- It is drawn outside the border
- Commonly used for focus effects (e.g., input fields)
- Supports
outline-offsetfor spacing - Cannot apply different outlines to each side
Conclusion
CSS Outline is a useful property for highlighting elements without affecting layout. It is especially helpful for accessibility and focus styling, making it an important part of modern web design.