The outline-color property is used to set the color of an element's outline. An outline is a line that is drawn around an element, outside the border. It is often used to highlight an element or to indicate focus.
The outline-color property can be used with any HTML element, but it is most commonly used with form elements, links, and buttons.
Here is the syntax for the outline-color property:
selector {
outline-color: color;
}
The color value can be specified in several ways, including:
Here are some examples of using the outline-color property:
button {
outline-color: red;
}
a:focus {
outline-color: blue;
}
input[type="text"]:focus {
outline-color: #00ff00;
}
In the first example, the outline color of all buttons will be set to red. In the second example, the outline color of any link that has focus will be set to blue. In the third example, the outline color of any text input that has focus will be set to green.
It is important to note that the outline-color property only sets the color of the outline. To set the width and style of the outline, you must use the outline-width and outline-style properties, respectively.
Here is an example of setting all three properties:
button {
outline: 2px solid red;
}
This will set the outline of all buttons to a 2 pixel wide solid red line.
It is also possible to set different outline colors for different sides of an element. This can be done using the outline-color property with the outline-offset property.
Here is an example:
div {
outline: 2px solid;
outline-color: red green blue yellow;
outline-offset: 10px;
}
This will set the outline of a <div> element to a 2 pixel wide solid line with different colors on each side (red on the top, green on the right, blue on the bottom, and yellow on the left), and an offset of 10 pixels from the element.
Overall, the outline-color property is a useful tool for adding visual emphasis to elements on a web page. By setting the color of an element's outline, you can draw attention to it and make it stand out.