Quick Tip: Multiple Borders with Simple CSS
videos

Quick Tip: Multiple Borders with Simple CSS

on Jun 21st 2010 with 142 comments
Tutorial Details
  • Topic: CSS Borders
  • Difficulty: Intermediate
  • Completion Time: 5 Minutes
Download Source Files
Demo View It Online

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.

Prefer to watch this video on Screenr?

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • arnold

    thanks to jeffrey and nicolas for sharing this idea

  • TahaH

    Any Ideas on how to get this working in IE7.. Thanks

  • http://wildanr05.student.ipb.ac.id wildanr05

    i’m a little weak in css, can’t really understand what’s going on in above code -_-

  • http://www.xcellence-it.com Xcellence IT

    hey, great tutorial… but this doesn’t work with IE7 or IE6? Any work around for IE7 would be great..

    Thanks for sharing this…

  • BJ

    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

    • http://jonyarbor.name Jonathan Yarbor

      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.

      • David McGuigan

        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.

      • http://NewHighScore.com rsturk

        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.

      • Adam king

        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.

      • http://www.darrenmcpherson.co.uk Darren McPherson

        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.

  • Pako Adrian

    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.

  • http://aninnovativeweb.com Sam Bowler

    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

    • http://nicolasgallagher.com Nicolas Gallagher

      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.

  • http://twiiter.com/aelien AC

    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.

  • http://arieff06.student.ipb.ac.id arieff

    hey, great tutorial… but this doesn’t work with IE7 or IE6? Any work around for IE7 would be great..

    Thanks for sharing this…

  • http://www.danblee.com Dan B. Lee

    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.

    • http://www.altinnet.com altin

      hi guys,This was an awesome tip

      thank you!

  • wolfdesign

    is #box:before really needed? it works without it as well

  • Christophe

    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.

    • http://aninnovativeweb.tumblr.com Sam Bowler

      There should be no difference at all. Try debugging by giving the :before a bright background or something else to highlight it.

  • http://cloverpetals.com/log TasiaChiba

    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.

  • http://www.o-theme.com Dian

    I’d stick with the border + outline method, at least it works inside the IEs.

  • http://www.ricardozea.net Ricardo Zea

    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.

  • http://hkdobrev.blogspot.com Harry

    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.

  • http://ageno.pl/ pozycjonowanie bielsko

    Hi,
    Where i can find nice dark theme for my coda?

    Thanks

  • http://www.emmi-nail.bg ноктопластика

    Good one. I like it :)

  • http://arifr06.student.ipb.ac.id ardhan

    i never use this, but it’s better if i know it first :)

  • http://trisr06.student.ipb.ac.id tee are

    great share.. i’ve trying it and it works

  • http://yuliantip06.student.ipb.ac.id yulianti

    thanx for share this article.. very helpful :)

  • http://tric06.student.ipb.ac.id utari

    thanks for sharing the code..

  • dig

    but this doesnt work if you dont have fixed height… do anyone know how to make it work for changing height.

  • http://nylens.nu Erik Blomqvist

    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

  • http://misoblog.net/ Miso

    Nice tutorial, today I’ve known that box can has multiple borders, that’s great!

  • http://www.josiahsprague.com Josiah

    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?

    • http://www.kitfoxink.com Kit MacAllister

      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

      • http://www.jaffydesigns.com/ Jason

        This was an awesome tip, thanks so much Kit!

        (also, great tip, Jeffrey!)

  • http://chairila06.student.ipb.ac.id chai

    i will try it, thanks

  • http://ekos06.student.ipb.ac.id Kojeje

    Great code :)
    I want to try it :)

  • http://ericsons06.student.ipb.ac.id/ eric

    waw very interesting..
    thanks for share the code..:)
    like this…^^v

  • http://karimul.makhtidi08.student.ipb.ac.id dety

    thanks for sharing your code.

  • http://bambang.wijonarko08.student.ipb.ac.id wij

    it looks exciting…it’s helpful..
    thanks for sharing the code..

  • http://oki.maulana08.student.ipb.ac.id kai

    thanx for sharing code… i wanna learn about CSS more

  • http://bcwebtech.info aromatech

    Thanks for sharing the post~

  • http://cmdesign.ca cmdesign

    Good job!
    Thanks!
    You save my time!
    Just what I was looking for.

  • http://nofel.saputra08.student.ipb.ac.id nofel

    thanks so much, like it ^^

  • http://asd.asd notme

    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”

  • Sebastian

    Hello, can you help me? I’ll like to make multiple borders on buttons. Have any ideas to make it?

  • Carl

    That’s neat!! Thanks for sharing this.

  • Nasi

    Hello! :) What is name on this plugin http://screenr.com/W8m for firefox? from right. :)

  • http://www.tenaxtechnologies.com java web development

    Any work around for IE7 would be great..

    Anyways great code. Thanks for sharing.

  • Dima

    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.

  • http://myriadhues.wordpress.com farghana

    Just one word I have – AWESOME!

  • Otto

    Awesome ! Thank you !

  • bart

    Border double achieves similar effect and is very crossbrowser, although not that flexible.

    #box { border: 4px double #bbbbbb; }

  • http://myshadowself.com Can anyone spell M.O.N.G?

    Or in one line:

    {outline:1px solid white;}

    • www.WorldWebGuys.com

      Does the trick

    • http://www.WorldWebGuys.com/

      However.. even though this does the trick, the browser does not recognize the pixel around the object as the border is recognized. To test this out, try having the object positioned at the top left of the site with body having a margin of 0px; the top & left of the outline will be going off the page. therefor you can probably run into the problem of positioning.. But I guess this can be fixed by also adding a second line: margin:1px

  • http://www.agah-iran.com farzad

    This was an awesome tip

    thank you!

  • http://www.runtyrobot.com runtyrobot

    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.

  • Levani

    This doesn’t seem to work in input elements… Any ideas?

  • http://AriaTemp.ir javad

    Hi ,very nice idea! thanks…

  • http://balics.net balics

    is it work in IE6 or IE7?
    Btw thanks for sharing .. :D

    jasa web bali

    • halma_artur

      looks like not working (tested on IE7)

← Older Comments
Newer Comments →