Outlines create a border around an element that sits outside the element’s content area and padding. Unlike borders, outlines do not affect the element’s layout.
Often used for accessibility purposes, outlines can help visually impaired users identify clickable elements. They can also be used for decorative purposes or to indicate focus or hover states.
Basic usage
- Target the element: Select the element you want to apply an outline to using CSS selectors (e.g.,
button,a,input). - Set the outline property: Use the
outlineproperty to define the outline’s style, width, and color.
Syntax
outline: style width color;Example
button {
outline: solid 2px blue;
}solid: Sets the outline style to a solid line.2px: Sets the outline width to 2 pixels.blue: Sets the outline color to blue.
Customizing Outlines
- Style: Use different values for the
styleproperty to achieve different effects:none: Removes the outline.dotted: Creates a dotted outline.dashed: Creates a dashed outline.double: Creates a double outline.groove: Creates a 3D-like groove effect.ridge: Creates a 3D-like ridge effect.inset: Creates an inset effect.outset: Creates an outset effect.
- Width: Adjust the outline width using a numeric value followed by a unit (e.g.,
2px,0.5em). - Color: Specify the outline color using a color value (e.g.,
red,#FF0000,rgba(255, 0, 0, 0.5)).
Additional Properties
outline-style: Sets the outline style separately.outline-width: Sets the outline width separately.outline-color: Sets the outline color separately.outline-offset: Controls the distance between the outline and the element’s border.
Best Practices
- Accessibility: Use outlines to improve accessibility for visually impaired users.
- Focus states: Apply outlines to elements that can receive focus (e.g., buttons, links, input fields) to indicate their active state.
- Hover states: Use outlines to visually highlight elements on hover.
- Consistency: Ensure consistent outline styles throughout your website for a cohesive user experience.