Outline in CSS
?? outline in CSS
The outline property draws a line around an element, outside the border edge. It’s often used to highlight elements, especially for accessibility focus states.
Key Characteristics
Outlines do not take up space (they don’t affect layout).
Can be non-rectangular (e.g., follow shapes).
Unlike borders, outlines may overlap other elements.
Useful for accessibility to show focus without shifting layout.
Syntax
/* Shorthand */selector { outline: [outline-color] [outline-style] [outline-width];}Outline Properties
| Property | Description |
|---|---|
outline-color | Color of the outline (e.g., red) |
outline-style | Style of the outline (solid, dotted, etc.) |
outline-width | Thickness of the outline (2px, etc.) |
outline-offset | Space between element edge and outline |
Example
button { outline: 3px solid blue; outline-offset: 2px; /* Space between border and outline */}Common Use: Focus Styles
button:focus { outline: 2px dashed orange; outline-offset: 4px;}This improves accessibility by making focused elements clearly visible.
Difference Between border and outline
| Aspect | Border | Outline |
|---|---|---|
| Takes up space | Yes (affects layout) | No (doesn’t affect layout) |
| Position | Inside the element box | Outside the element box |
| Can have radius | Yes | No (always rectangular) |
Want me to show examples for styling outlines or creating focus rings?
