After years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.
Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.
Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):
.pagetitle {
border-color: black white white black;
}
My snap reaction was: “That’s got to be wrong. Since when does the border-color property allow separate shorthand declarations for the color of each border?” But then I quickly realized that I have probably used that property maybe one or two times in 10+ years of development, so what do I know? Plus, I’m sure Christian–a seasoned developer–knows what he’s talking about.
The fact is, every time I declare a border’s color, I always do it using the shorthand border property, like this:
.pagetitle {
border: solid 1px black;
}
It’s rare that I ever use border-color, border-style, border-left-style–or any of those other long-winded versions of the border-related properties. In 99% of cases, using the shorthand border property does exactly what you need.
Sure enough, I checked out the SitePoint CSS reference and it says:
The shorthand property border-color sets the border color on all four sides of an element using from one to four of the values specified. Each border can have its own value.
So just like margin and padding shorthand values, the color for each border is declared in the order: top, right, bottom, left (clockwise from the top).
Also Works With border-style and border-width
You can do the same thing with the border-style and border-width properties, defining a different width and/or border style for each side of the targeted element.
And naturally, you can omit values if necessary, like this:
.pagetitle {
border-width: 2px 1px;
border-style: solid dashed;
}
Again, just like margins and padding, although we’re declaring only the first two values, the other two simply inherit from the first two.
Keep in Mind…
You can’t incorporate this multi-declaration technique using the border property (although that would seem logical); it only applies to the three properties mentioned above. So the following would be invalid:
.pagetitle {
/* THIS IS INVALID! */
border: solid dashed 1px 2px black white white black;
}
Also, you can’t do this with the outline-width, outline-style, or outline-color properties. Thus, when you declare an outline, it’s the same color, style, and width on all sides.
Not Very Practical…?
The truth is, you’ll probably never, or else rarely, have to use this in any project. So I guess it’s a good “nice-to-know” but doesn’t have a whole lot of application considering how rare it is to want different colors/styles/thicknesses on different borders on the same element.
I think if this has any kind of application, it might be in some JavaScript-driven code that changes the look of lines (in the form of borders) dynamically according to user input. But I guess in many cases that sort of thing would be better done with something like canvas.
So forgive me if you already knew any of this. I guess I’ve gotten so accustomed to declaring the same border style, color, and width on all sides using a single declaration that I never even thought about the possibilities available in those other properties. Would love to hear if this is new to anyone else reading this.
Very interesting, and yes probably not a lot of times that you would use this – but still a good to know, I think.
Though it might be rarely used, concepts like this are very important. I’m frustrated on a daily basis by front end developers who over-complicate their code. There’s always a simple way to do something, but without bringing up simple-but-important ideas like this one, those simple ways are easily forgotten. We need more adherence to the principle of K.I.S.S. (Keep It Simple, Stupid) in web development. So thanks for this post!
I use this quite often on tables where I want to set the top and bottom borders but not the sides. You can use “border-top” and “border-bottom” separately, but then if you need to change the color or width you must do so twice. (Gets annoying if you are testing several styles.)
So I often do `border-width: 1px 0; border-style: solid; border-color: #ddd`
Good to know, sometimes I set different border color for inputs, to create a light and shade, with this snippet is going to be much simpler.
Exactly!
Very useful shortcut and is easy to remember.
Laziness. That’s what technology is all about :)
If you didn’t know about multiple border colors, you are going to be flummoxed when you hear about CSS Triangle.
http://davidwalsh.name/css-triangles
Actually, it can be used quite often to simulate fake buttons or any 3D-looking element when you want consistency of colors and sizes across different web browsers … So most of the time it’s about setting the same width (usually 1px) for all sides, a solid style and setting right and bottom borders to a darker color and the top and left to a lighter color.
I knew it already.
Good one to keep in mind.
Thanks for your useful article.
If there were Like button in page, I would do Like it.
I use this actually quite often to fake a 3d ridge effect, for example between list elements
e.g.
li {
border: 1px solid #ccc;
border-color: #333 #ccc #eee;
}
Coooool… Mental note made ;)
Quite interesting. I have 2 years of practice in web design and I use these shortcuts in every project.
The most common case is when I need to set different colors.
wow I’ve never seen that either, thanks for blogging about it, too bad you can’t just use it with border:
Another nice use for this is faking a shadow on images or other things in dumb browsers.
<code><img src=”pic.png” class=”frame” /></code>
…and then….
<pre><code>
.frame {
background: #FFF;
border: 1px solid #CCC;
border-color: #CCC #999 #666 #CCC;
border-width: 1px 2px 2px 1px;
padding: 6px;
}
</code></pre>
That’s interesting, Being a big fan of short hand method, I never use it and I don’t think is practical either. But still is a nice-to-know css trick. Thanks for it!
Good pointer.
But the long version of border command is much useful in setting the border of many block elements.
Such as setting an underline for a link wrapped in a div.
A useful application could be the display of code blocks in articles such as this one, like:
.code {
border: dashed 1px white;
border-left: solid 2px #ccc;
}
Cheers!
-Vaishakh.
Very useful shortcut and is easy to remember.
http://www.handycss.com/effects/different-border-style-on-each-side/
If you didn’t know about multiple border colors, you are going to be flummoxed when you hear about CSS Triangle.
http://www.handycss.com/effects/different-border-style-on-each-side/
It’s a nice trick, but the problem I have with it is the angle it forms in the corners, It’s not like the image at the beggining of these article
Great Post.
It’s a very useful post.