Quick Tip: Multiple Borders with Simple CSS
Tutorial Details
- Topic: CSS Borders
- Difficulty: Normal
- Estimated Completion Time: 4 Minutes
Did you know that we can achieve multiple borders with simple CSS, by using the :after amd :before psuedo-classes? This is something I recently learned myself! I’ll show you how to add more depth to your designs, without images, in just a few minutes.
Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-Borders</title>
<style>
body { background: #d2d1d0; }
#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}
#box:before {
border: 1px solid white;
content: '';
width: 198px;
height: 198px;
position: absolute;
}
#box:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
In short, any browser that supports the :before and :after psuedo-elements (all major browsers) can take advantage of this effect. Of course, there are alternatives, including the use of box-shadow, as well as adding additional mark-up to the page; however, this is clean solution that you should definitely consider. Thanks for watching!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
thanks to jeffrey and nicolas for sharing this idea
Any Ideas on how to get this working in IE7.. Thanks
i’m a little weak in css, can’t really understand what’s going on in above code -_-
hey, great tutorial… but this doesn’t work with IE7 or IE6? Any work around for IE7 would be great..
Thanks for sharing this…
Dear people,
I’m was just wondering..
I also use Coda for Mac as a web-client because i can’t afford Adobe DreamWeaver and Coda does a great job for a low price.
Now i so the pro’s change the background colors of the Coda screen to dark and type in White colors.
I’ve just tried it to and it looks better for my eyes, but my question is.. Is there a website or something that can help me pick the right colors at the right attributes?
I don’t want it to make it one big messy coloring art painting of text on my screen so i was wondering maybe some pro’s can give me some help on what colors i should take at what styles.
I’t would be great if somebody could make a tutorial about that so we know how to put the right colors at the right place.
Thanks!
BJ
Dreamweaver is worthless if you know how to code at all. It has a decent IDE, but it tries to do too much. If i could water it down to the IDE only I would use it.
You’re totally misinformed. Dreamweaver is an incredibly powerful text editor, in fact in the demo video above filmed in Coda most of what the presenter typed would’ve been code hinting requiring exponentially less keystrokes.
Dreamweaver is incredible. There is no such thing as “does to much [ for you ]“. It’s called productivity.
I have to agree with Jonathan.
I have Dreamweaver CS4 and I constantly find myself using Notepad++ instead. Most of the stuff that I do is using PHP and wordpress so I don’t really need Dreamweaver to keep track of pages or links. I get frustrated with Dreamweaver adding stuff that I didn’t tell it to and it seems to take a long time to start up.
@Jeffrey Way, Awesome video tutorial! Keep up the good work.
I must admit, Dreamweaver is worthless.. Specially if you’re using the generated code.. The documents would never be useful for people with slower connections, clients would obviously view the tacky, unprofessional code too.
I have to agree – Dreamweaver is pretty useless. For mac I use Textmate (I hear coda is pretty awesome for designer/front-end) and use Sublime Text 2 for Windows.
Dreamweaver spits out horrible code – I see it as a tool for people who don’t know what they are doing and need to get a basic website made.
Just my opinion.
As previous users mentioned this doesn’t work on IE 7 (at all). In IE 8 there is a bug – the height of the “:after/:before” box must be 1px smaller than the height in other browsers. You could use conditional CSS statements to fix this if the styling is done in the .html document, hover this is very unlikely – so the only other option is using “hacks” – which is unacceptable so you would be better of just using more markup (another div – or 2 – inside the “#box” etc.). That way you would have cross-browser consistency.
I’ve written up a quick method on how to achieve this effect on dynamically sized elements (when you don’t know the elements width and height): http://aninnovativeweb.tumblr.com/post/734223461/multiple-borders-on-dynamically-sized-elements-with-css2
This approach was already mentioned in my original article. Your post incorrectly attributes this flawed nettuts code to me and misses out the use of z-index to make content clickable/selectable.
You can use the ColorZilla extension to get the colors from a certain part of a page, so you don’t have to switch to photoshop to get them.
hey, great tutorial… but this doesn’t work with IE7 or IE6? Any work around for IE7 would be great..
Thanks for sharing this…
Hi Jeffrey!
Unrelated to the video topic, but I noticed while you were in Coda you entered div#box and then hit a hotkey combination that turned it into . – What was that hotkey?
Thanks for the hard work with all of these. I have followed your tutorials for years now.
is #box:before really needed? it works without it as well
What if I wanted to apply html5 to this? For example would :
“#header:before {….}” do the same as “header:before {….}”
I just tried doing that and it messed it up, tips/tricks/suggestions ? I was trying to create a design with only html5 and css3.
There should be no difference at all. Try debugging by giving the :before a bright background or something else to highlight it.
OMG! That is a sweeeeet bit of code you have there. I’ve always wanted to simplify my coding and this little trick’s going to save a ton, make coding cleaner, while spicing things up! Thanks so much for sharing this.
I’d stick with the border + outline method, at least it works inside the IEs.
People, this doesn’t work in IE6 or IE7, no need to try and make it work, don’t waste your time = Graceful Degradation.
It does work fine in IE8, no issues whatsoever.
Very nice little trick, thanks for sharing.
The reason the code doesn’t work with IE6 or IE7 is because they don’t support (or only partially support) CSS2 styling rules.
See.
http://www.quirksmode.org/compatibility.html
There’s another method for simple purposes. Let’s say you want three-layer border: white-black-white.
All you need is outline: 3px groove #fff;
Of course the outline property has different behaviour than border and your way is quite flexible.
Hi,
Where i can find nice dark theme for my coda?
Thanks
Good one. I like it :)
i never use this, but it’s better if i know it first :)
great share.. i’ve trying it and it works
thanx for share this article.. very helpful :)
thanks for sharing the code..
but this doesnt work if you dont have fixed height… do anyone know how to make it work for changing height.
For those of you who’ve been asking about the syntax color theme, it’s actually from the Railcast Theme for TextMate converted by Joe Bergatine. You can find it here:
http://joebergantine.com/werkstatt/seestyle
Nice tutorial, today I’ve known that box can has multiple borders, that’s great!
I used this on one of my designs, but the problem I had is that I had links inside the box I wanted multiple borders on. Using the before/after selectors to add the borders seemed to cover the links and make them unclickable. Anyone have an idea of how to get around this?
I’m having the same issue, but i’ve found a fix using border-radius. Instead of box:before, try
.box{
border: 1px solid #ccc;
-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 1em #ddd;
-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 1em #ddd;
box-shadow: inset 0 0 0 1px #fff, 0 0 1em #ddd;
}
only good on safari, firefox and chrome
This was an awesome tip, thanks so much Kit!
(also, great tip, Jeffrey!)
i will try it, thanks
Great code :)
I want to try it :)
waw very interesting..
thanks for share the code..:)
like this…^^v
thanks for sharing your code.
it looks exciting…it’s helpful..
thanks for sharing the code..
thanx for sharing code… i wanna learn about CSS more
Thanks for sharing the post~
Good job!
Thanks!
You save my time!
Just what I was looking for.
thanks so much, like it ^^
Thanks ,you have really helped me ,cuz i were surfing the net for it few days ago
but can i create more than three borers ???
and what is the content element ??
and thanks “a lot”
Hello, can you help me? I’ll like to make multiple borders on buttons. Have any ideas to make it?
That’s neat!! Thanks for sharing this.
Hello! :) What is name on this plugin http://screenr.com/W8m for firefox? from right. :)
Any work around for IE7 would be great..
Anyways great code. Thanks for sharing.
Can the same effect be done for just one border?
for example (border-left).
What if I have a button and it has only right and left borders and I want to put border:after for the left side only.
Hopefully I made my question clear.
Looking forward to get the answer.
P.S. Thank you for the great tut.
Just one word I have – AWESOME!
Awesome ! Thank you !
Border double achieves similar effect and is very crossbrowser, although not that flexible.
#box { border: 4px double #bbbbbb; }
Or in one line:
{outline:1px solid white;}
This was an awesome tip
thank you!
There are some slight issues with this – atleast as of what I’ve encountered.
If you do this in a field, where links or input fields have to be accessible – the absolute position, will make this act like an invisible modal box – which is impossible to click through.
But for text content. All fine and dandy.
This doesn’t seem to work in input elements… Any ideas?
Hi ,very nice idea! thanks…