css - Outline
To draw a line outside of an element's borders, use the CSS outline attribute. Because outlines are on a different layer than the element itself, they have no effect on the element's size or location, in contrast to borders. In order to ensure that users can clearly see when an element is active, outline functionality is frequently employed for accessibility purposes. Examples of this include emphasizing focusable elements like form inputs and links.
This blog post will explain how the CSS outline property functions, show you how to modify it, and offer some advice on how to utilize it to your advantage while creating websites.
1. What is an Outline in CSS?
A line that is drawn around the exterior of an element—as opposed to its border—is called an outline. Outlines are only cosmetic and have no bearing on where other items are positioned on the page, unlike borders, which take up space in the layout.
Key Differences Between Border and Outline:
The layout is impacted by the border, which is drawn inside the element.
The outline is not a part of the element and is drawn outside of it.
The box model does not include the outline.
Example:
div {
outline: 2px solid red;
}
In this example, the div will have a solid red outline around it that is two pixels wide; however, the outline will not change the div's size or arrangement.
2. The outline Property
Setting the outline color, style, and width, as well as any other outline property, in a single declaration is referred to as the outline property.
Syntax:
outline: <outline-width> <outline-style> <outline-color>;
Example:
button {
outline: 2px dotted blue;
}
In this example, the button element is surrounded by a blue, 2-pixel-wide dotted edge.
3. Individual Outline Properties
For more precise control, you can also modify the outline's component properties:
outline-width: Indicates the outline's thickness.
outline-style: Indicates the kind of outline line (solid, dashed, dotted, etc.).
outline-color: Defines the outline's color.
outline-offset: Increases the distance between the border and outline of an element.
Example of Individual Properties:
input {
outline-width: 3px;
outline-style: dashed;
outline-color: green;
outline-offset: 5px;
}
In this example:
Three pixels make up the outline.
Its style is dashed.
It's a green hue.
The contour is shifted five pixels from the edge of the element.
4. Outline Width (outline-width)
The thickness of the outline is specified by the outline-width property, which takes in predefined values like thin, medium, and thick, or any valid CSS length unit (px, em, rem, etc.).
Example:
div {
outline-width: 4px;
}
This sets the outline thickness to 4 pixels.
Predefined Values:
thin: Typically 1px
medium: Typically 3px (default)
thick: Typically 5px
div {
outline: thick solid black;
}
In this example, the div will have a thick black solid outline.
5. Outline Style (outline-style)
The outline-style property defines the style of the outline. Some of the most commonly used outline styles are:
solid: A single, solid line.
dashed: A series of dashes.
dotted: A series of dots.
double: Two solid lines.
groove: A 3D grooved effect.
ridge: A 3D ridged effect.
inset: A 3D inset effect.
outset: A 3D outset effect.
Example:
div {
outline-style: dashed;
}
This applies a dashed outline to the div element.
6. Outline Color (outline-color)
The outline-color property specifies the color of the outline. You can use color names, HEX, RGB, RGBA, or HSL values.
Example:
a {
outline-color: red;
}
This will set the outline color of the link (a) to red.
Transparency Example:
button {
outline: 2px solid rgba(0, 0, 255, 0.5); /* 50% transparent blue */
}
In this case, the button will have a 50% transparent blue outline.
7. Outline Offset (outline-offset)
The outline-offset property adds space between the border (or edge of the element) and the outline. It visually moves the outline away from the element, but the offset does not affect the layout.
Example:
div {
outline: 2px solid orange;
outline-offset: 10px;
}
In this example, the orange outline will appear 10 pixels away from the element's border, creating additional visual space around it.
8. Outlines and Accessibility
In particular, outline is crucial for accessibility. Outlines draw the attention of users using keyboards or screen readers to interactive components like buttons, links, and form fields. To give users a visual hint, many browsers automatically add an outline to focused components (like input:focus).
Example:
input:focus {
outline: 2px solid blue;
}
This ensures that when an input field is focused (clicked or tabbed into), it has a blue outline, making it more noticeable.
Avoid Removing Focus Outlines:
Although it could be alluring to eliminate the outline for visual appeal, particularly on buttons or links, doing so could make the content less accessible. Rather than doing away with the focus outline entirely, think about personalizing it.
Example of Custom Focus Outline:
button:focus {
outline: 2px dashed yellow;
outline-offset: 4px;
}
This preserves the shape but modifies it for enhanced style and visibility.
9. No Negative Values for Outline
You cannot use negative values for outlines, unlike margins. For an outline to be noticed, it needs to have a positive thickness and be solely visual.
10. Resetting Outlines
You can set the outline attribute to none or 0 to totally remove the outline from an element. For focusable items, this should be done carefully though, since eliminating outlines completely may negatively impact accessibility.
Example:
button {
outline: none;
}
This eliminates the button's default outline, but don't forget to supply a different visual cue for focus if necessary.
Conclusion
When designing the look of elements, the CSS outline property comes in handy, especially for focus and accessibility states. You can maintain a neat and orderly layout while making your web designs more user-friendly by learning how to employ outlines. When dealing with outlines, keep in mind the accessibility requirements of users and, in order to preserve a positive user experience, think about tailoring focal outlines rather than eliminating them.
