Categories
In CSS, the outline property is used to create a visible border around an element, similar to the border property. However, unlike the border property, the outline property does not take up space in the layout and is drawn outside the element's border. The outline is typically used to highlight an element, such as when it receives focus (e.g., when navigating with the keyboard) or for visual styling purposes.
Here's the syntax of the outline property:
selector {
outline: outline-width outline-style outline-color;
}
Now, let's break down each part of the outline property and provide examples for each:
1) Outline Width: The outline-width property sets the width of the outline. It can take values like thin, medium, thick, or specific length values (e.g., 1px, 2px, etc.).
/* Example using outline-width */
.element {
outline-width: 2px;
}
Above sets the outline width of elements with class "element" to 2 pixels.
2) Outline Style: The outline-style property defines the style of the outline. It can take values like dashed, dotted, solid, double, groove, ridge, inset, outset, and more.
/* Example using outline-style */
.selected {
outline-style: dotted;
}
Above exampel defines a dotted outline style for elements with class "selected."
3) Outline Color: The outline-color property sets the color of the outline. It can be specified using named colors, hexadecimal notation, RGB values, or HSL values.
/* Example using outline-color */
.focused {
outline-color: red;
}
Above example sets the outline color of elements with class "focused" to red.
4) Using outline shorthand: Similar to other CSS properties, you can use the outline shorthand property to combine all outline-related properties into a single line.
/* Example using outline shorthand */
.button {
outline: 2px dashed blue;
}
Above example combines outline width, style, and color using the outline shorthand property for elements with class "button."
It's worth noting that the outline property is particularly useful for indicating focus on interactive elements like buttons and links. By default, most browsers add an outline to focused elements for accessibility purposes. However, you can customize the outline to match your design and layout preferences.
Keep in mind that the outline property is distinct from the border property. The outline does not influence the layout and does not replace the need for border if you want to create a visible border that affects the element's size and layout.