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:

• http://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element?rq=1
• http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links?rq=1

Feedback about page:

Feedback:

Optional: your email if you want me to get back to you:

Send Feedback Cancel

---