The outline-color CSS property is used to set the color of the outline that surrounds an element. It allows you to define the color of the outline independently of other outline-related properties, such as outline-style and outline-width.
The outline-color property accepts various color values, such as named colors (red, blue, etc.), hexadecimal color codes (#RRGGBB), RGB values (rgb(255, 0, 0)), or HSL values (hsl(240, 100%, 50%)).
Here’s an example:
button {
outline-color: blue;
}
In this example, the button element is styled with an outline color of blue. When the button gains focus or is activated, a blue outline will be visible around it.
You can customize the outline color to match your design preferences or to provide visual feedback for interactive elements.
It’s important to note that the outline-color property only sets the color of the outline, and the outline itself will not be visible unless you also specify the outline-style and outline-width properties.
The outline-color property is particularly useful for enhancing accessibility and indicating focus or interactivity on elements, such as links, buttons, or form inputs.