Double Border Style

Forum Moderators: not2easy

Message Too Old, No Replies

Double Border Style

with different widths

BeeDeeDubbleU

5:20 pm on Feb 6, 2009 (gmt 0)

Can a double border be styled such that the outer border is thicker than the inner and can the space between the two be changed?

pageoneresults

5:25 pm on Feb 6, 2009 (gmt 0)

Not according to the CSS 2 Spec.

8.5.3 Border style
[w3.org...]

double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'

You could probably do some fancy footwork and hack something together. ;)

willybfriendly

5:40 pm on Feb 6, 2009 (gmt 0)

I have seen some pretty amazing border work done with nested divs. Depending on what you're putting a border around, you might want to consider that.

swa66

10:59 pm on Feb 6, 2009 (gmt 0)

CSS3 will have graphical borders, they are already available in e.g. safari (and chrome).

[webmasterworld.com...]

Firefox 3.1 (now still in beta) should have it too once released (with -moz-border-image, instead of -webkit-border-image).

phranque

3:13 pm on Feb 8, 2009 (gmt 0)

i was trying something like this to replace a double-border image with a <h1> header and some text:

<html>
<head>
<title>H1 header with double border around text</title>
<style type="text/css">
h1 {
font-size: 16px;
color: #FEDCBA;
background-color: #56789A;
padding: 4px 12px;
border: 2px solid #FEDCBA;
margin: 6px;
}
.h1 {
background-color: #012345;
float: left;
}
</style>
</head>
<body>
<div class="h1"><h1>Header Text</h1></div>
</body>
</html>

BeeDeeDubbleU

3:47 pm on Feb 8, 2009 (gmt 0)

My requirement is for a containing div to have a double border. Unfortunately this would have work in IE.

willybfriendly

4:35 pm on Feb 8, 2009 (gmt 0)

div's are easy, even in IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="outer">
<div class="inner">
<h1>Alphabet</h1>
<p>The quick brown fox jumps over the lazy dog</p>
</div>
</div>
</body>
</html>