Treehouse: 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…

  8. Mark
    Permalink to comment#

    “1. It always goes around all the sides, you can’t specify particular sides”
    Objection, your honor! Another glorious what-if flop here!

    http://stackoverflow.com/questions/28142833/border-outline-html5-css3

    We most 100% certainly CAN set that boder-image border to JUST ONE SIDE. So the HUGE question here is this. If we are using a border-image, and since img is one of the original IE1+ hangers-on-to-outlines, why can’t we code that [border] image in some way to display its outline… even when we display that [border] image on just one side (like say, border-image-bottom)?

    Burb [but-u-really-better] play with this one-time at W3 (if you can’t afford codepen like me, lol).

    http://www.w3schools.com/cssref/css3_pr_border-image.asp

  9. kaushik
    Permalink to comment#

    You have missed important thing. The outline offset.

  10. Francky Kleyneman

    Warning: accessibility alert!

    Lots of web builders don’t like the outlines, and are hiding them. But removing all outlines is making it impossible for Tab users to see on which link they are (mouse users can see it by hovering with the pointer hand).

    The guideline is:
    http://www.w3.org/TR/WCAG20/#keyboard-operation (Web Content Accessibility Guidelines (WCAG) 2.0 / Guideline 2.1: Make all functionality available from a keyboard).

    Happily there is a simple solution to hide the outlines for mouse users, maintaining the accessibility for Tab users!

    See:
    http://www.456bereastreet.com/archive/200910/remove_the_outline_from_links_on_active_only/

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```