Tutorial: Easy multiple CSS-Borders
I would say all of you know the normal CSS-Border border: 1px solid #000000; which creates a normal 1 pixel thick border around the (HTML) object.
A few months ago I read on Nettuts+ how to create multiple borders with simple CSS and today some addtional ways came in my mind how to create such more borders without adding unnecessary markup with simple CSS.
(Note: The example is based on the Nettuts+ example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-Borders</title>
<style>
body {
background: #222222;
}
#box {
background: #fcfcfc;
border: 1px solid #666666; /* #3 */
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
/* -moz-box-shadow: 0px 0px 0px 1px #ffffff; */ /* Optional after #3 */
outline: 1px solid #ffffff; /* #4 (most outer border) */
}
#box:before {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #000000; /* #1 (most inner border) */
left: 1px;
top: 1px;
}
#box:after {
border: 1px solid #ffffff; /* #2 */
content: '';
width: 198px;
height: 198px;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
This example is based on HTML5 and CSS3.
In the CSS I added comments which represents the order of the CSS borders.
Number 1 is the most inner border and it goes up to 4 CSS Borders without adding additional markup or up to 5 CSS borders with Firefox!
This example is tested with Firefox, Safari, Opera and IE8.
Check out: Live preview
Check out more helpful CSS tutorials or share this page on social media to help others.
Published by David on 15th August, 2010
Would you like to follow BWF or like it? Click here!