Multiple borders with CSS2

Posted by 6bytes at 6, July, 2010

Category: CSS, HTML

Tags: , ,

How to make a div with multiple borders?

Usual approach is to create a div with border then create another div inside that one with different border. We end up with lots of divs inside of another divs. If there only was an easier way to do it in CSS without the need of more divs… There is!

:before and :after pseudo classes

Internet Explorer 6 and 7 does not support :before and :after pseudo classes and to be honest I couldn’t find a working fix for it. The good thing is that those dinosaurs are fading out from our lives.
:before and :after pseudo classes allow to place text or an image before and after each HTML element using content: ”; attribute. In below example content is empty as we need just a border.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple borders with CSS2</title>
<meta charset="utf-8" />
<style>
body { background: #fff; }
#box {
	float: left;
	position: relative;
	width: 100px;
	height: 100px;
	margin: 20px;
	border: #f00 solid 5px;
}
	#box:before {
		position: absolute;
		width: 90px;
		height: 90px;
		content: '';
		border: #0f0 solid 5px;
	}
	#box:after {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 80px;
		height: 80px;
		content: '';
		border: #00f solid 5px;
	}
</style>
</head>
<body>
	<div id="box"></div>
</body>
</html>

Above code should result in:
Multiple borders with CSS

More information about :before and :after pseudo classes can be found here

 

  • Dustin duford

    Hello,
    I’m 15 and trying to learn and I made a drop down menu type of thing so when your mouse goes over it it drops down. But part of it drops behind the main part of the page how do I fix this?

    Thanks