Grow your CSS skills. Land your dream job.

outline

Last updated on:

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 emphasize a link when tabbed to without affecting positioning and in a differnet way than hover.

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

The shorthand being:

outline: [ <outline-width> || <outline-style> || <outline-color> ] | 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;
}

More Info

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 1.2+ 1.5+ 7+ 8+ Any 3.1+

Comments

  1. Anonymous
    Permalink to comment#

    I vote that that they submit a rule that allows us to specify what side the outline shows on and allow us to set the corner radius on it too to match our designs. Sometimes a straight edge ruins the look of the layout. I know we can turn them off and use :focus and turn on the borders to do it, but why not allow us the option. Anything we can do with the border we should be able to do with the outline property. Someone should submit it to the proper people for future improvements.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".