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
selector {
outline: width style color;
}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; |
Example
<!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>Output
Browser Output
The<div>will have:
A blue border
A red dashed outline outside the border
The<p>will have a green outline
The outline will not affect spacing between elements
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.