CSS Outline Color

In CSS, you can set the color of the outline using the outline-color property. The outline-color property allows you to specify the color of the outline that surrounds an element.

Here's how you can use it:

The syntax for the outline-color property is as follows:

        
            selector {
   outline-color: color;
}

        
    

• The selector represents the HTML element or class/id selector to which you want to apply the outline color.
• The color parameter specifies the desired color for the outline. It can be defined using color names, hexadecimal values, RGB values, HSL values , or any valid CSS color notation.

        
            button {
    outline: 2px solid red;
    outline-color: blue; /* Sets the outline color to blue */
}

        
    

In the above example, the button element will have a solid red outline with a width of 2 pixels, and the outline color will be blue.

Additionally, you can use the invert value for the outline-color property, which automatically sets the outline color to be the inverse of the element's background color. This can be useful when you want the outline to stand out regardless of the background color.

        
            input {
    outline: 2px solid invert; /* Sets the outline color to be the inverse of the background color */
}

        
    

In this example, the element input will have an outline color that is the inverse of its background color.

By utilizing the outline-color property, you can control the color of the outline to enhance the visual appearance of elements, especially when applying focus or highlighting effects.