Home » Blog » www » Double borders with CSS :before and :after

Double borders on a single element with CSS :before and :after

05 Aug 2010 12:09pm

Until recently if I ever needed to create an element with a double border, like on the example below, I would use nested DIVs.

I have recently discovered a way of doing this on a single element (IE<IE8 users look away)...

To achieve the double border effect we can use the ":before" CSS pseudo-class. The code below demonstrates how we can achieve this:

 1:<!DOCTYPE html>
 2:<html lang="en">
 3:<head>
 4:	<meta charset="utf-8">
 5:	<title>untitled</title>
 6:</head>
 7:<body>	
 8:	<style type="text/css">
 9:		body { background: #080808; }
10:		
11:		#example_box {
12:			background: #080808;
13:			border: 1px solid #00ADEE;
14:			width: 468px;
15:			height: 50px;
16:			position:relative;
17:		}
18:		
19:		#example_box:before {
20:			border: 1px solid #FFFFFF;
21:			content: '';
22:			width: 466px;
23:			height: 48px;
24:			position: absolute;
25:		}	
26:	</style>
27:	<div id="example_box"></div>
28:</body>
29:</html>

Now that we have this working, we can take things further and create a triple border by using the ":after" CSS pseudo-class:

 1:<!DOCTYPE html>
 2:<html lang="en">
 3:<head>
 4:	<meta charset="utf-8">
 5:	<title>untitled</title>
 6:</head>
 7:<body>	
 8:	<style type="text/css">
 9:		body { background: #080808; }
10:		
11:		#example_box_2 {
12:			background: #080808;
13:			border: 1px solid #00ADEE;
14:			width: 468px;
15:			height: 50px;
16:			position:relative;
17:		}
18:		
19:		#example_box_2:before {
20:			content: '';
21:			border: 1px solid #FFFFFF;
22:			width: 466px;
23:			height: 48px;
24:			position: absolute;
25:		}
26:		
27:		#example_box_2:after {
28:			content: '';
29:			border: 1px solid #00ADEE;
30:			width: 464px;
31:			height: 46px;
32:			position: absolute;
33:		}
34:	</style>
35:	<div id="example_box_2"></div>
36:</body>
37:</html>

And this is what we get:

Great! But... We still have Internet Explorer and unfortunately the ":before" and ":after" CSS pseudo-classes are not supported in versions early than IE8. The rest of the browsers seem to be able to handle it just fine.

Category: www

Bookmark this post

Comments:

No Comments...