The outline CSS property is a shorthand property that allows you to set multiple aspects of the outline that surrounds an element in a single declaration. It combines the outline-color, outline-style, and outline-width properties into one.
The outline property accepts values in the following order:
-
outline-width: Specifies the width or thickness of the outline. -
outline-style: Specifies the style of the outline, such as solid, dashed, dotted, etc. -
outline-color: Specifies the color of the outline.
Here’s an example:
button {
outline: 2px dotted blue;
}
In this example, the button element is styled with an outline of 2 pixels width, dotted style, and blue color. When the button gains focus or is activated, a dotted outline with a blue color will be visible around it.
You can adjust the values in the outline property to customize the appearance of the outline according to your design requirements.
It’s important to note that the outline property may not be supported in older browsers, so it’s recommended to use individual outline-color, outline-style, and outline-width properties if cross-browser compatibility is a concern.
The outline property is particularly useful for quickly setting multiple aspects of the outline in a single declaration, simplifying the CSS code and enhancing the visual styling of elements.