CSS Outline Shorthand
The outline shorthand sets width, style, and color together in a single declaration.
Writing outline-width, outline-style, and outline-color separately works, but the <outline> shorthand combines all three into one line. It mirrors the border shorthand, so if you know one you already know the other.
Value order
The three values can appear in any order, though width, style, then color is the most common. The style value is the only one that is truly required for the outline to show.
All three values at once
<!DOCTYPE html>
<html>
<head>
<style>
.field {
outline: 2px solid #00643c;
}
</style>
</head>
<body>
<input class="field" type="text" value="Username">
</body>
</html>A focus ring in one line
<!DOCTYPE html>
<html>
<head>
<style>
button:focus {
outline: 3px dashed hsl(153, 100%, 25%);
}
</style>
</head>
<body>
<button>Continue</button>
</body>
</html>Note: Pair the shorthand with CSS Outline Offset to add breathing room between the element and its outline.
