all your code are belong to us » border http://allurcode.com and all my code are belong to you Thu, 19 Jan 2012 20:33:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Multiple borders with CSS2 http://allurcode.com/2010/07/06/multiple-borders-with-css2/ http://allurcode.com/2010/07/06/multiple-borders-with-css2/#comments Tue, 06 Jul 2010 10:18:45 +0000 6bytes http://allurcode.com/?p=353

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

 

]]> http://allurcode.com/2010/07/06/multiple-borders-with-css2/feed/ 2