CSS Outlines
Syntax
- outline: outline-color outline-style outline-width | initial | inherit;
- outline-width: medium | thin | thick | length | initial | inherit;
- outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
Parameters
| Parameter | Details |
|---|---|
| dotted | dotted outline |
| dashed | dashed outline |
| solid | solid outline |
| double | double outline |
| groove | 3D grooved outline, depends on the outline-color value |
| ridge | 3D ridged outline, depends on the outline-color value |
| inset | 3D inset outline, depends on the outline-color value |
| outset | 3D outset outline, depends on the outline-color value |
| none | no outline |
| hidden | hidden outline |
Remarks
outline is now described in Basic UI, a CSS Module Level 3 (it was already described in REC CSS2.1)
Outline property is defined by default in browsers for focusable elements in :focus state.
It shouldn't be removed, see http://outlinenone.com which states:
What does the outline property do?
It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people. (…)
Interesting related examples on Stack Overflow:
