Border
outline
outline is a shorthand that draws a line outside an element. Like border, it takes a width, style and color in any order, but it never affects layout.
Syntax
<line-width> || [ auto | <outline-line-style> ] || [ auto | <color> ]Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
outline4pxoutline-width
solidoutline-style
#4a86cboutline-color
Code
.box {
outline-offset: 6px;
outline: 4px solid #4a86cb;
}Controls
outline-width4px
outline-stylesolid
outline-color#4a86cb
About
How it differs from border
- It takes up no space. A thicker outline never changes the element’s size or moves its neighbors; it simply draws over them.
- It can’t vary by side. All four sides get the same line.
outline-offsetmoves it away from the frame, and negative values pull it inside. The preview on this page uses6pxso the outline is easy to see.- Modern browsers draw it along the rounded corners from
border-radius.
Omitted parts
Without outline-style you get none, so no line is drawn. Without outline-color you get auto, which usually means the text color (currentcolor).
auto and focus rings
The auto style draws the browser’s own focus ring. Because outlines are how keyboard focus is shown, if you remove them with outline: none, always provide a replacement style under :focus-visible.