Multiple Borders
Doing it with pseudo elements
Using pseudo elements for multiple borders has fairly deep browser support as it's CSS 2.1 (not 3).
The element needing multiple borders should have its own border and relative positioning.
#borders {
position: relative;
border: 5px solid #f00;
}The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value.
#borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).
Other Ways
Don't forget about the outline property. While it's a bit more limited than border (goes around entire element no matter what) it's an extra free border if that's what you need.
outline: 5px solid red;If you are down with CSS3, you can use box-shadow (one of the deepest supported properties of CSS3) to get infinite (!) box shadows, by comma separating values.
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
So glad you have things here that should be obvious but elude the brain during the days work. Thanks Chris – appreciated
Hm,
I am searching for a short way to make a div box look indent, so I stumbled upon this post. I thought it would help me getting those indent think to work, but it looks weird in Firefox and doesn’t work in IR. I used a method which is combining the border- and the outline-properties which works fine in Firefox but not in IE. Any suggestions?
Thanks for this post, Chris – very interesting.
I played around with this today (my first foray into using pseudo-elements).
But I had to adjust the size, margins, and padding of the :before pseudo-element using tedious trial-and-error. Haven’t figured out the required math to avoid trial-and error in the future, but was pleased I finally got it working.
I think this works a little better with negative positioning on the pseudo element. You can then have a background color on the box itself, and a margin negating the positioning of the pseudo element.
Degrades a little more gracefully
#borders {
position:relative;
background:#B2C1C8;
margin:10px
}
#borders:before {
content: ” “;
position: absolute;
z-index: -1;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid #B2C1C8
}
It isn’t a multiple border thing, but I figured this out because of this page so I thought I’d share it here. I had not previously caught that you can do the multiple shadow thing and had been going crazy trying to figure out how to do a CSS only bevel on a button. Thanks to you I can now!
.bevel{ box-shadow: 0px 8px 5px -5px RGBA(0,0,0,.6), inset 3px 3px 5px 0px RGBA(0,0,0,.1), inset -3px -3px 5px 0px RGBA(255,255,255,.4); }Chris, I think using box-shadow is a little far from being semantic. I mean, after all, what we write should be what users would expect semantically, if they could understand our code. Imagine somebody is reading your code, and encounters
I think he expects to see a shadow (or a glow) in your site, not a solid, border-like outline.
There is no such thing as “semantic CSS”. CSS is presentation and markup is semantic. There has been a long struggle to separate the two. There is no such thing as “semantic aesthetics”.
Well, the example you gave is in fact a shadow or glow, not solid outline.
I guess you meant
box-shadow: 0 0 0 3px black
which gives a solid, 3 pixel outline.
And if a user understands CSS, he will know this and expect accordingly.
Actually i m using image instead of multiple border now thx for this post it really very helpfull for me i m going to use these tips.
To get double borders, the “outline” property is great for boxy divs or page containers. You can also add rounded corners to outline to match the corners of your element border, like this:
You can also try these outline-style properties:
thanks for all your tips, Chris.
I just look at the demo and the effect is really cool. Kinda like photo frame thingy… Thanks for posting this tips. I can use this to create nice border for my image portfolio. :D
Personally, the box-shadow was worked for me. Completely forgot it existed but managed to use it to create metallic strips on the lefts and right of a box. Looked great, thanks to this guide :)
Thanks a lot. I was just using something like this except it didn’t had the z-index: -1; and therefore could not select anything in that div.
The z-index: -1; rule will cause the extra borders to hide underneath any parent elements with a normal z-index and a non-transparent background. To fix this, create z-index rules for each non-transparent parent element. You also need to add a non-static position, such as position:relative, to each one. HAX!
i not task compilit css multiple borders