CSS Outline Shorthand

As mentioned earlier, you can use the shorthand outline property to specify the outline width, style, and color all at once.

The outline shorthand property is particularly useful when you want to apply the same outline to different states of an element, such as normal, hover, focus, etc.

The syntax for the outline shorthand property is as follows:

        
            selector {
    outline: outline-width outline-style outline-color;
}
        
    

• The selector represents the HTML element or class/id selector to which you want to apply the outline.
• The outline-width specifies the width of the outline. It can be specified using length values (e.g., 2px, 3px, etc.) or any valid CSS width notation.
• The outline-style sets the style of the outline, such as solid, dotted, dashed, double, groove, ridge, inset, outset
• The outline-color defines the color of the outline. It can be specified using color names, hexadecimal values, RGB values, or any valid CSS color notation.

        
            button {
    outline: 2px dotted red;
}
        
    

In the above example, the button element will have an outline with a width of 2 pixels, a dotted style, and a red color.

You can also use inherit as a value for any of the properties to inherit that specific property from its parent element.

        
            button {
   outline: inherit dotted blue;
}
        
    

In this example, button will inherit the width and color of the outline from their parent element and have a dotted blue outline style.