Outline

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;

Removing the default outline from Anchor Tags (links)

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


Copyright © 2013-2022 Emw3.com
Some rights reserved