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?
What about outline? It’s like border, but isn’t part of the box model, so doesn’t add width.
It’s not possible to get only three sides with outline, as far as I know.
Ah, sorry – doesn’t seem to be a way to specify which sides you can outline. Wonder why not!?
I think a useless post to discuss further .
How about this:
div { border: 1px 1px 1px 0 solid red; }
I don’t think that works? Unless I’m crazy.
I put it as example 5 here: http://jsbin.com/three-sided-border/14/edit
That doesn’t work, wouldn’t be too bad to have tho. I prefer the second method btw.
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.
Maurice. That’s the way I’ve always done it. Leaves a smaller footprint than any of the other examples shown.
What browser are you guys seeing that work on?
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.
As much as I hate to admit it, I’d most likely use the first example out of ease :)
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).
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 :)
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.
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.
yup i agree
it is more simple
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.
I use the second way, all others are unnecessarily repetitive.
I don’t see why. Multiple box-shadows or the inset keyword are supported by all latest versions of rendering engines.
By the way, you could use just one shadow, with the spread parameter, but the vertical “border” ends up double the size of the horizontal ones :( http://jsfiddle.net/leaverou/Eed3V/
box-shadows are even more useful for emulating multiple “borders”, as David DeSandro recently demonstrated: http://jsfiddle.net/desandro/KQsL2/
By “Internet Explorer version 9+,” I meant, as far as Internet Explorer goes, only version 9 and up.
Ah, ok.
second example best for me
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.
I usually go with method #1, but have started using method #2.
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.
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.)“the code above will only work in Internet Explorer version 9+”
Never thought I’d read that
i like the second example…
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!
How can I add avatars to my blog post?
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.
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.
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…
It works :-) second option is better…