CSS Outline Color
The outline-color property sets the color of an outline using any valid CSS color value.
The <outline-color> property controls the color of the outline drawn around an element. It works with every color format CSS supports, so you can match your outline to your brand or theme.
Color formats
- Named colors such as red or teal.
- Hexadecimal values such as #00643c.
- RGB and RGBA values such as rgb(0, 100, 60).
- HSL values such as hsl(153, 100%, 20%).
- The keyword invert, which reverses the underlying colors for contrast.
Setting an outline color
<!DOCTYPE html>
<html>
<head>
<style>
.field {
outline-style: solid;
outline-width: 2px;
outline-color: #00643c;
}
</style>
</head>
<body>
<input class="field" type="text" value="Email">
</body>
</html>A translucent focus ring
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
outline-style: solid;
outline-width: 3px;
outline-color: rgba(0, 100, 60, 0.5);
}
</style>
</head>
<body>
<input type="text" placeholder="Search">
</body>
</html>Note: If you do not set an outline color, the browser uses the element's current text color, or its own default focus color for focused elements.
