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 different way than hover.

a:focus {
  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:focus {
  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+


  1. User Avatar
    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.

    • User Avatar
      Juan Gallardo
      Permalink to comment#

      I totally agree. I was hoping to use the outline on just one side like

      outline-right: 2px #333 solid;

    • User Avatar
      Permalink to comment#

      Just use outline: none; border-right: … and it’s almost same effect.

  2. User Avatar
    Permalink to comment#

    Yes! thanks.

  3. User Avatar
    Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

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

  5. User Avatar
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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!


    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).


  9. User Avatar
    Permalink to comment#

    You have missed important thing. The outline offset.

  10. User Avatar
    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!


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.