The CSS outline property is a powerful tool for drawing a line around an element, outside of its border. Unlike the border, the outline does not take up space and is drawn on top of the content. This makes it ideal for highlighting elements for accessibility or debugging purposes without affecting the layout.
Example 1: Basic Outline
/* This rule applies a solid blue outline of 2 pixels to any <p> element that has focus. */
p:focus {
outline: 2px solid blue;
}
Explanation
This code adds a 2-pixel wide, solid blue outline to a paragraph element when it receives focus, such as when a user tabs to it. This is a common accessibility feature to visually indicate the user's current position on the page.
Example 2: Dotted Outline
/* This rule applies a dotted red outline to a <div> element. */
div {
outline-style: dotted;
outline-color: red;
outline-width: 3px;
}
Explanation
This example uses the individual outline properties to create a 3-pixel wide, dotted red outline around a <div>. This demonstrates how to control the style, color, and width of the outline independently.
Example 3: Dashed Outline with Offset
/* This rule applies a dashed green outline with a 5px offset to an <input> element. */
input {
outline: 2px dashed green;
outline-offset: 5px;
}
Explanation
Here, a dashed green outline is applied to an <input> element. The outline-offset property adds a 5-pixel space between the element's border and the outline itself, preventing them from overlapping.
Example 4: Double Outline on Hover
/* This rule applies a double orange outline to a <button> when the mouse hovers over it. */
button:hover {
outline: 4px double orange;
}
Explanation
This CSS rule creates a 4-pixel wide, double-lined orange outline around a button when the user hovers their mouse over it. This provides clear visual feedback for interactive elements.
Example 5: Groove Outline Style
/* This rule applies a groove-style gray outline to an element with the class "box". */
.box {
outline: 5px groove gray;
}
Explanation
The groove outline style gives the outline a 3D appearance, as if it were carved into the page. This example applies a 5-pixel wide, gray groove outline to any element with the class "box".
Example 6: Ridge Outline Style
/* This rule applies a ridge-style purple outline to an <a> tag. */
a {
outline: 3px ridge purple;
}
Explanation
Similar to groove, the ridge outline style also provides a 3D effect, but appears to be coming out from the page. This code adds a 3-pixel wide, purple ridge outline to all anchor tags.
Example 7: Inset Outline Style
/* This rule applies an inset-style dark cyan outline to an element with the id "main-content". */
#main-content {
outline: 6px inset darkcyan;
}
Explanation
The inset outline style makes the outline appear as if the element is embedded into the page. This example applies a 6-pixel wide, dark cyan inset outline to the element with the ID "main-content".