Fancy double border solution?

**Shoxt3r** · Feb 8, 2013 21:54

Hi there,

I'm just having a play around with some CSS code and was wondering if there was a way of changing the colour of the inner line on a border-style "double? Alternatively is there a CSS3 solution which can give the same effect?

For an example of what I mean please see http://www.w3schools.com/cssref/play...&preval=double which demonstrates a double border style. Ideally I would like control over the colour of the white line so that I can have the border wrapped around an element and have a darker inner line with the outer being the same colour as the background colour for the element itself.

Hopefully I've explained that clearly - it is nearly 4am!

Cheers,

Shoxt3r

**ralph.m** · Feb 8, 2013 22:03

The easy way to do it is to have an outer container with the first border and 1px padding and an inner container with the second border.

**Shoxt3r** · Feb 8, 2013 22:08

Ah ha! Thanks for your input Ralph. In the meantime I was playing around with the double and hitting a dead-end but managed to come up with the following. Not exactly advanced but it's a nice little challenge to get over

Code:

<div style=" background-color:grey; padding:5px; width:600px;">
	<div style="background-color:grey; padding:10px; border:2px solid black; color:white;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis interdum lobortis. Nam nibh neque, lobortis nec dapibus non, malesuada ut sapien. Nam nibh odio, tincidunt quis volutpat nec, interdum ac ipsum. Sed tortor purus, ultricies non molestie adipiscing, imperdiet eget lorem. Nam ornare pellentesque condimentum. Phasellus ipsum diam, bibendum elementum tincidunt in, vestibulum ut lorem.
	</div>
</div>

**ralph.m** · Feb 8, 2013 22:36

Yeah, I don't know if it's worth getting any more sophisticated than that. I don't know about modern browsers, but I gave up on double borders etc. a long time ago, as they didn't work in a lot of browsers anyway.

Just for fun, I tried it with CSS alone, but I doubt this is very bulletproof. (It works in my Mac browsers, but I don't even want to know what it does in IE):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
div {border: 2px solid black; padding: 10px; position: relative; width: 600px; margin: 100px auto; background: gray; color: white;}
div:before {content: ""; width: 100%; height: 100%; position: absolute; padding: 3px; border: 2px solid gray; top: -5px; left: -5px; z-index: -1;}
</style>
	
</head>
<body>

<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>

</body>
</html>

**dresden_phoenix** · Feb 9, 2013 00:43

-moz- allows for border-colors (note the 's') you can list multiple colors each applies to 1px of the width of the border from the inside out. Of course that is a proprietary attribute so it's kinda a tease.

If you dont mind relying on CSS3 properties you can use box-shadow to simulate extra borders ( remember tho that they DONT affect the calculated dimensions the way a 'real' border would)...

.bord {height:500px; width: 500px; border:1px solid #000; box-shadow: inset 0 0 0 1px red, inset 0 0 0 2px yellow, inset 0 0 0 3px green,inset 0 0 0 4px pink }

hope that helps

**ralph.m** · Feb 9, 2013 01:27

If you are happy not to have a gap between each line, another option is to comping border with outline:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
div {border: 2px solid black; outline: 2px solid gray; padding: 10px; position: relative; width: 600px; margin: 100px auto;}
</style>
	
</head>
<body>

<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>

**Shoxt3r** · Feb 9, 2013 06:29

Originally Posted by dresden_phoenix

-moz- allows for border-colors (note the 's') you can list multiple colors each applies to 1px of the width of the border from the inside out. Of course that is a proprietary attribute so it's kinda a tease.

If you dont mind relying on CSS3 properties you can use box-shadow to simulate extra borders ( remember tho that they DONT affect the calculated dimensions the way a 'real' border would)...

.bord {height:500px; width: 500px; border:1px solid #000; box-shadow: inset 0 0 0 1px red, inset 0 0 0 2px yellow, inset 0 0 0 3px green,inset 0 0 0 4px pink }

hope that helps

Thanks dresden! Though to be honest I was hoping for a cross-browser solution which works in older browsers too. Always worth keeping in the code bank for future use mind

Originally Posted by ralph.m

If you are happy not to have a gap between each line, another option is to comping border with outline:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
div {border: 2px solid black; outline: 2px solid gray; padding: 10px; position: relative; width: 600px; margin: 100px auto;}
</style>
	
</head>
<body>

<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>

Ah fantastic ralph! Certainly cuts down on the code and works in IE, Chrome etc. I did try your other solution but neither Chrome nor IE played ball and treated it like a "double".

Thanks for all the help guys!

**ronpat** · Feb 9, 2013 18:41

One more based on your original <div> and <p> tags just for fun:

Code:

<!DOCTYPE html>
<html lang="en">
<!--
http://www.sitepoint.com/forums/showthread.php?972368-Fancy-double-border-solution
Thread: Fancy double border solution?
2013.02.08 22:54
Shoxt3r
-->
<head>
    <meta charset="utf-8">
    <style media="all">
div {
    display:table;
    outline:3px solid #000;
    border:3px solid #f00;
    border-spacing:6px;
    background-color:#fe0;
    width:500px;
    margin:40px auto;
}
p {
    outline:3px solid #89f;
    border:3px solid #faf;
    background-color:#ffa;
    padding:6px 9px;
    margin:0px;
}
    </style>
</head>
<body>

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis interdum lobortis. Nam nibh neque, lobortis nec dapibus non, malesuada ut sapien. Nam nibh odio, tincidunt quis volutpat nec, interdum ac ipsum. Sed tortor purus, ultricies non molestie adipiscing, imperdiet eget lorem. Nam ornare pellentesque condimentum. Phasellus ipsum diam, bibendum elementum tincidunt in, vestibulum ut lorem.</p>
</div>

</body>
</html>

**Paul O'B** · Feb 10, 2013 08:09

And one more for clean markup

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
	border: 2px solid black;
	padding: 10px;
	position: relative;
	width: 600px;
	margin: 100px auto;
	background: gray;
	color: white;
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}
div:before,.after {
	content: "";
	position: absolute;
	padding: 3px;
	border: 2px solid gray;
	top: -5px;
	left: -5px;
	bottom:-5px;
	right:-5px;
	z-index: -1;
}
</style>
</head>
<body>
<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>

It's Ralph's original code with an expression for ie6 and 7.

**ralph.m** · Feb 10, 2013 08:13

Off Topic:

Code:

zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')

**Paul O'B** · Feb 10, 2013 08:24

Originally Posted by ralph.m

Off Topic:

Code:

zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')

I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it's an old DS trick).

I don't really care if IE6/7 users have javascript disabled as I only use :after and :before for enhancements anyway - not that I care for IE6 at all these days and only care slightly for IE7

**Shoxt3r** · Feb 10, 2013 10:59

Originally Posted by Paul O'B

I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it's an old DS trick).

I don't really care if IE6/7 users have javascript disabled as I only use :after and :before for enhancements anyway - not that I care for IE6 at all these days and only care slightly for IE7

Haha amen to that. Interesting seeing that code in the CSS, not seen that before...

Thanks for all the suggestions guys, really appreciate it and certainly gives me a range of options!

**ralph.m** · Feb 10, 2013 16:51

Originally Posted by Paul O'B

I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it's an old DS trick).

I don't really care if IE6/7 users have javascript disabled as I only use :after and :before for enhancements anyway - not that I care for IE6 at all these days and only care slightly for IE7

Likewise, I'd never seen that before. (What's a "DS trick"?) Is that a purely CSS solution, or does it not work with JS off? In my mind, I've officially written off IE6 and 7, but it's still interesting to know about this.

**dresden_phoenix** · Feb 11, 2013 18:30

I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it's an old DS trick).

yup , I too find this technique invaluable as well. I usually add it in to my ie.css files. I am careful when selecting anything that might nest tho.

**Paul O'B** · Feb 12, 2013 08:46

Originally Posted by ralph.m

Likewise, I'd never seen that before. (What's a "DS trick"?)

It was from one of Deathshadow's posts but is also used elsewhere on the web.

Is that a purely CSS solution, or does it not work with JS off? In my mind, I've officially written off IE6 and 7, but it's still interesting to know about this.

No expressions only work when JS is enabled but does anyone apart form developers know how to turn off js easily in old IE versions? Expressions can slow pages down in IE but this is once only expression and expressions are only supported in ie7 and under anyway.

**ralph.m** · Feb 12, 2013 08:51

Originally Posted by Paul O'B

It was from one of Deathshadow's post

Hehe, I have a lot of code snippets by "DS", so that's the first thing I thought of, but assumed you meant something else.

(I have even more snippets by "pmob", BTW.

)

does anyone apart form developers know how to turn off js easily in old IE versions?

One would expect not, although I sometimes hear that workplaces have JS disabled on their computers for security reasons. Not sure if that still happens these days.

User Tag List

Thread: Fancy double border solution?

Thread Tools

Display

Fancy double border solution?

Bookmarks

Bookmarks

Posting Permissions