Double border in CSS

I wonder if someone can help. I want to create a table with a double border in css. I know it can be done like this:

<style>
DIV.outer {BORDER: 5px solid;BORDER-COLOR:#000000}
DIV.inner {BORDER: 5px solid;BORDER-COLOR:#D1D1E1}
</style>

<div class="outer">
<div class="inner">
Koos
</div>
</div>

Which will result in a table as shown in this screenshot:
http://koos.50webs.com/images/koos_border.html

But the problem is, I need to create this double css border in a single DIV, ie:

<div class="new">
Koos
</div>

Is this possible?

 

Dunno why you're making a table out of divs? If it's a table, make it a table.

No, I don't know of any way to do what you want... if they were the same colour, you could set them as double lines... but two different colours, unless they change something for CSS3, I'm pretty sure can't be done yet.

Usually there are other elements in the div though, and often you can get them to make your borders for you. Like:

<div class="koos">
<h3>Foo</h3>
<p>textitty text text text...</p>
</div>

There is a possibility that p has side and bottom borders to do the grey, while the h3 can have side and top borders... assuming the div called "koos" has no padding and the h3 and p have no margins.

 

Thanks for the advice. That is probably the best I can do: making use of the existing elements in the div.

 

It can be done with the 'double'
I would do it like this:
.doubleborder {border:10px double;}
as for the color thing with this attribute u can only choose 1 color. ur original way is the only other way. U can change the colors of the 4 side though:
border-top or border-color-top
border-bottom or border-color-bottom etc.....

 

I would go with what Stomme poes said, and try to use a P element and add a border to that was well. You might want to add padding to the div and P such as this:

<style>
* {padding: 2px; }
div { border: 1px #000 solid }
p { border: 1px red solid; margin: 0px }
</style>

Code (markup):

That way this:

<div> 
<p>test</p> 
</div>

Code (markup):

Formats correctly, and everything works out good and dandy. Just wrap the P tags around everything in the div.

You can see an example here: http://csscharm.com/test

 

Have you tried using a background on the one element, and setting a padding? I've used this with mixed successes with white backgrounds. As long as not too much is going on with the interior padding, it seems to work [most of the time].

<div style='background-color:#D1D1E1; padding:5px; margin:0px; border:5px solid #000;'>
<p style='width:100%; background-color:white; margin:0px; padding:0px;'>Koos</p>
</div>

Code (markup):

 

Oh yeah, the padding thing (or margins on the children) would work nicely too-- here, the parent div could even have a background image with, I dunno, a texture or something, so you're no longer limited to flat colours-- you could have gradient borders and the like, and the thickness set by the padding width : )