CSS Outline Style
The outline-style property draws a line around an element just outside its border without affecting layout.
An outline is a line drawn around an element, sitting outside the border edge. Its most important trait is that it does not take up space in the box model, so adding one never shifts other elements around. This makes outlines ideal for focus indicators.
Available styles
The <outline-style> property must be set for an outline to appear, because it has no default visible style. It accepts the same keywords as border-style.
A solid outline
<!DOCTYPE html>
<html>
<head>
<style>
.field {
outline-style: solid;
}
</style>
</head>
<body>
<input class="field" type="text" value="Name">
</body>
</html>Outline versus border
- A border is part of the box model and adds to the element's size; an outline does not.
- An outline is always drawn around all sides at once and cannot be applied to a single edge.
- Outlines can extend beyond the element and may overlap neighboring content.
Highlighting a focused input
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
outline-style: dashed;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>Note: Avoid removing focus outlines entirely with outline: none, because keyboard users rely on them to see where they are on the page.
