Grow your CSS skills. Land your dream job.

Three-Sided Border

Published by Chris Coyier

If you need to put a border on only three sides of an element, there are a bunch of ways you can do it.

You can specifically declare the border on just three sides:

div { 
  border-top:    1px solid red;
  border-right:  1px solid red; 
  border-bottom: 1px solid red;
}

Verbose, but easy to understand.

Or, you could declare just a border which will cover all four sides and remove the one you don't want.

div {
  border: 1px solid red;
  border-left: 0;
}

Much shorter, but relies on understanding and maintaining that the border removing override is kept after the border declaration.

Or, you could declare the color and styling and use shorthand only the border-width to specifically declare the three sides.

div {
  border-color: red;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}

Shorter than the first example, but less repeative. Just need to be aware if left border did acquire width it would already be red and solid.

And then there is the fact that borders affect the size of the element under the regular box model. If you wanted to add borders without adding to the size of the element, you'll need to lean on CSS3. Here is a way to do it with inset shadows:

div {
  -webkit-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  -moz-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
}

But then inset box shadows has far less browser support than borders do. For example, the code above will only work in Internet Explorer version 9+. If you'd rather use borders, and still not affect the elements size, you could play with box-sizing, which is supported down to IE 8.

Oh the choices! This is such a small thing, but I think it is a good example of how there is so often many different ways to accomplish the same thing in CSS. If you are just starting out in CSS, is this kind of thing confusing or pretty straightforward?

See all examples.

Comments

  1. What about outline? It’s like border, but isn’t part of the box model, so doesn’t add width.

  2. Permalink to comment#

    How about this:
    div { border: 1px 1px 1px 0 solid red; }

  3. Permalink to comment#

    The second option is the way I always go – just providing all the borders and removing one I don’t need. Simple, very little code and cross-browser compatible.

    Maurice’s code is also a really nice, simple option though I like the ability to quickly see that I’m removing one edge, just a personal preference there – keeps me a bit more aware of the removal.

    • That’s my preferred way too.
      It’s only two lines and you only have the colour declared once.
      I look at which one is the most maintainable when testing.

      With No.2 you only need to change one word to change either the colour, side or width.

      No.3 is pretty close too, but it’s three lines and and to change a side it’s two changes on the one line. Changing the width is easy with a quick grep luckly.

  4. Permalink to comment#

    Maurice. That’s the way I’ve always done it. Leaves a smaller footprint than any of the other examples shown.

  5. Edison A. Leon
    Permalink to comment#

    When I started using borders for the first time I used the first example for some time, after learning more CSS I started using the second example until lately (like 3 or 4 month ago) I’ve being using the last example.

  6. As much as I hate to admit it, I’d most likely use the first example out of ease :)

  7. Permalink to comment#

    Sometimes I set a border color to transparent when I want to turn it off, especially when it should maintain its width (for instance, when a border toggles on or off with hover).

  8. Permalink to comment#

    That’s what I usually do:

    border: solid red;
    border-width: 1px 1px 1px 0;

    It’s like the third example, but shorter. :3

    • I like this :)

    • Permalink to comment#

      This would definitely work. I usually use example #2 but I think I might try this. Like Chris said,
      “so often many different ways to accomplish the same thing in CSS”
      We all just have to pick the one that creates less headache in the long term.

    • Permalink to comment#

      I never knew about the border-width shorthand. This is a problem I deal with all the time so Im stoked to find a better way.

    • Permalink to comment#

      yup i agree
      it is more simple

  9. Permalink to comment#

    I’ve used the first option on the couple of occasions when I’ve needed a three sided border.

    It’s always worked fine for me. Nice post Chris.

  10. Permalink to comment#

    second example best for me

  11. Scott
    Permalink to comment#

    I use the third method if I ever come across this situation, because it’s more maintainable. With each border side separated like the first example, as soon as you want to change the colour or style you have to change it multiple times. Kind of a pain if you’re a perfectionist like me, trying to find the perfect colour for a particular border…

    The second example also works in this situation, but something about it feels… off to me. I can’t explain it.

  12. I usually go with method #1, but have started using method #2.

  13. Jeremy F
    Permalink to comment#

    When I was originally learning CSS I never knew about the magic of combining multiple styles like this into one (like background, margin, padding, ect.) until using CSSEdit, which will do it automatically for you. That program truly is magically time-saving, I just wish they’d implement CSS3.

  14. Permalink to comment#

    Minor nitpick: you say “repeative” instead of “repetitive” just under the third example.

    (Oh, and just to add to the discussion, I prefer the second option, using border-direction:0. I’m crazy about CSS shortness that way.)

  15. Noah
    Permalink to comment#

    “the code above will only work in Internet Explorer version 9+”

    Never thought I’d read that

  16. hichan
    Permalink to comment#

    i like the second example…

  17. Permalink to comment#

    This is a subject that really don’t need discussing, in till there is a short hand version which would read

    { border: #red 1px 1px 1px 0px solid; }

    its frustrating that this doesn’t work!

  18. Permalink to comment#

    How can I add avatars to my blog post?

    • Dan
      Permalink to comment#

      Get a Gravatar at gravatar.com

      Gravatar-supporting sites will then use your gravatar whenever you post to a blog using an email address which you have registered with gravatar.com. You can add multiple email addresses to your account, and manage different images.

    • Permalink to comment#

      Dan,
      Sorry , I was inquiring as to adding commenter avatas to my blog. At the moment, I’m building my own wordpress theme and need a little code snippet so commenters can add their own avatar/gravatars.
      Thanks.

  19. Permalink to comment#

    i have used this, but this is not compatible in IE7

    div {
    border: 1px solid red;
    border-left: 0;
    }

    but 3rd one is helpful for me… thanks…

  20. Yunus Khan

    It works :-) second option is better…

This comment thread is closed. If you have important information to share, you can always contact me.

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