Quick Tip: Multiple Borders with Simple CSS
Tutorial Details
- Topic: CSS Borders
- Difficulty: Intermediate
- Completion Time: 5 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.
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 Jeffrey Way
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.
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
- Pablo
- Vera Maxakova
- krike06