CSS Outline Width
The outline-width property sets how thick an outline is, using a length or a size keyword.
Once an outline has a style, you can control its thickness with <outline-width>. As with other outline properties, changing the width never affects the size or position of the element itself.
Accepted values
- A length such as 1px, 3px, or 0.2rem for an exact thickness.
- The keyword thin for a narrow line.
- The keyword medium, which is the default.
- The keyword thick for a heavier line.
Length and keyword widths
<!DOCTYPE html>
<html>
<head>
<style>
.box-a {
outline-style: solid;
outline-width: 3px;
}
.box-b {
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<div class="box-a">Box A</div>
<div class="box-b">Box B</div>
</body>
</html>Note: An outline-width has no visible effect unless outline-style is also set to something other than none.
Emphasizing focus
A slightly thicker outline on focus makes interactive elements easier to spot, which helps accessibility without changing the layout.
Thicker outline on focus
<!DOCTYPE html>
<html>
<head>
<style>
button:focus {
outline-style: solid;
outline-width: 2px;
}
</style>
</head>
<body>
<button>Submit</button>
</body>
</html>
