Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Using the CSS shorthand for borders
This tip uses CSS shorthand to an extra step. To see what CSS shorthand is, go read Roger's article first, then come back to see how it can be applied to create custom borders.
When using CSS shorthand, if you wanted to have a 1px border wrapping a box, but one of the sides uses a different color, you might end up writing something like this:
.foo{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 3px solid #555;
}Which, by all intents and purposes, works just fine. But did you know that there's an even shorter way of writing this? First, set all the borders with one line, as one style, then on the next line, override the differing border with a new style.
Here's what I mean:
.foo{
border: 1px solid #999;
border-right: 3px solid #555;
}This gives you the same appearance as the above, but is a little easier to type and even saves a few bytes in the process.
2 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Matt
: http://www.mattstow.com
17 April 2006, 19:30 : Permanent link to comment
If you wanted to give an entity borders, which are all the same colour but vary in width you can use this:
.foo {
border: solid #999;
border-width: 5px 3px 1px 2px;
}
Blair
: http://
18 April 2006, 09:08 : Permanent link to comment
Just an FYI, shorthand for ‘border-color’ works too, as in:
.foo {
border: 1px solid #000;
border-color: #111 #222 #333 #444;
}