CSS Outlines

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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

ParameterDetails
dotteddotted outline
dasheddashed outline
solidsolid outline
doubledouble outline
groove3D grooved outline, depends on the outline-color value
ridge3D ridged outline, depends on the outline-color value
inset3D inset outline, depends on the outline-color value
outset3D outset outline, depends on the outline-color value
noneno outline
hiddenhidden 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:



Got any CSS Question?