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.

  2. Damien
    Permalink to comment#

    Yes! thanks.

  3. Anonymous
    Permalink to comment#

    outline : 0; is needed in Chrome/Chromium to remove the default blue outline around input and textarea elements.

  4. Anonymous
    Permalink to comment#

    outline : 0; i
    is needed in Chrome/Chromium to remove the default blue outline around input and textarea elements.

  5. Anonymous
    Permalink to comment#

    outline : 0;
    is needed in Chrome/Chromium to remove the default blue outline around input and textarea elements.

  6. Karppalo
    Permalink to comment#

    Interesting. On Firefox 31.0 I had to set “outline-style: auto;” on a DIV, which contained an image, to fix some weird clipping problem whenever the image was translateY(-20px):ed on DIV:hover. The part of the image that was going over the DIV box model was clipped for a split second before it was again displayed properly.

    There were some other combinations too that worked, like “outline: 0px solid transparent” and etc. The defaults seems to be (at least on Chrome) “outline: 0px none rgb(255, 255, 255″.
    I didn’t see this problem on Chrome nor on IE.

  7. Karppalo
    Permalink to comment#

    And derp, on Chrome setting the “outline-style: auto” also sets “outline-width: 3px” so I guess the best option is to use “outline: 0 solid transparent” or something like that…

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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