outline

The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:

1. It always goes around all the sides, you can’t specify particular sides
2. It’s not a part of the box model, so it won’t effect the position of the element or adjacent elements

Other minor facts include that it doesn’t respect border-radius (makes sense I suppose as it’s not a border) and that it isn’t always rectangular. If the outline goes around an inline element with different font-sizes, for instance, Opera will draw a staggered box around it all.

It is often used for accessibility reasons, to emphasise a link when tabbed to without affecting positioning and in a different way than hover.

a:active {
  outline: 1px dashed red;
}

The shorthand being:

outline: [  ||  ||  ] | inherit

It takes the same properties as border, but with “outline-” instead.

The above shorthand could have been written:

a:active {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Browser Support