Outline Property
Last updated: 2026-09-13
outline Outline Property
outline draws a line around an element, outside its border, and is mainly used to indicate the focused state. Unlike border, outline takes up no space and does not affect the element's size or the page layout. It is a shorthand that sets the outline color, style, and width at once.
| Category | |
|---|---|
| Initial Value | medium none currentcolor |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
outline: <outline-color> || <outline-style> || <outline-width>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<outline-color> || <outline-style> || <outline-width> | Value | Outline shorthand (takes no space, used for focus indicators) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v9 |
| Supported in all major browsers | |||||
Important： outline is commonly used for accessibility focus indicators. Avoid outline: none to remove the default focus style unless you provide an equally clear alternative.
❓ FAQ
QWhen should I use outline vs border?
AUse border when the line participates in layout and is part of the box model. Use outline for visual cues that take up no space, especially keyboard focus states. outline is drawn outside the border, does not affect element size, and can be distanced from the element with outline-offset. Don't remove focus styles with outline: none — provide a clear custom alternative instead.
QCan outline be rounded?
AYes. In modern browsers (Chrome 94+, Firefox 88+, Safari 16.4+), outline follows the element's own border-radius and renders rounded corners; older browsers draw it square. If you need precise control over the shape, simulate it with box-shadow, which naturally supports rounded corners and also takes no space.
QHow do I create a good-looking custom focus style to replace the default outline?
AUse the outline shorthand with outline-offset: outline: 2px solid #0078d4; outline-offset: 2px; leaves a small gap between the outline and the element. Never remove focus indicators with outline: none — it harms keyboard users. If you implement it with box-shadow instead, make sure the contrast is sufficient.
QWhat is the difference between outline and box-shadow?
Aoutline is a line with a style and width that takes no space and follows the element's rounded corners in modern browsers. box-shadow fakes a stroke with blur and spread (e.g. box-shadow: 0 0 0 2px red;) and supports multiple shadows, glows, and inner shadows. Neither affects layout, but box-shadow cannot draw dashed lines, so focus styles often combine both.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
