Shorthand for the 3 outline properties:
outline: outline-width outline-style outline-color ;
This shorthand is equivalent to the following:
element { outline-width: length | thin | medium | thick | inherit ; outline-style: style ; outline-color: color ; }
Alternatively you can choose to inherit from a parent element: outline: inherit;
In the case of <a> tags, most web browsers will give navigation hyperlinks a default coloured / dotted outline when they have focus. This is especially useful for folks who can't use a mouse or have a visual impairment and are navigating with the TAB key. If you set outline:none you will make the links inaccessible for these people. If you must remove the default outline, then set an alternative property on :focus for example:
#test1 a:focus { outline: #FF0000 dotted medium; }
#test2 a:focus { background: #FFFF00; }
Examples:
h1 { outline: 1em solid blue ; }
.emw3class { outline: 2px dotted #93622f ; }
#emw3id { outline: 1px solid rgb(0,255,0) ; }
Try it:
Outlines differ from borders in that they do not take up space, they are drawn above the content and extend out towards the margin. |
(CSS 2) Browser Support: All major browsers - browsers will interpret the shortcut values in any order.
“The paper cutouts allow me to draw with color. For me, it is a simplification. Instead of drawing an outline and then filling in with color-with one modifying the other-I draw directly in color...It is not a starting point, it is a completion” ~ Henri Matisse
Related:
outline-color - Color of an outline.
outline-style - Style of an outline.
outline-width - Width of an outline.
border - Shorthand to set all the border properties
The CSS Box Model
Pseudo-Classes