4 border colors?

border-top-color: yellow; border-right-color: red; border-bottom-color: blue; border-left-color: green;

uhh .. no ..

What I meant was, is it possible, for all of the borders, or one, whatever, instead of 1 color, could there be 4 different?

What I meant was, is it possible, for all of the borders, or one, whatever, instead of 1 color, could there be 4 different?
eh :? do what :?

Do you want to read that back to yourself?

Isn't that what Deuce showed you?

I'm not sure what you are asking.
The code I gave you will make each side a different color.

#box { border: 1px solid; border-top-color: yellow; border-right-color: red; border-bottom-color: blue; border-left-color: green; }

I believe the OP wants four colors on each (or for a single) border. This simple answer is no. You could however nest four elements and place a different colored border on each element. If you were looking to do this on a single side (or in some cases all) then perhaps a background image would be suitable.

although i have not tried it and am positive it is not semantically correct could one do

and just have each of them with a border and padding?

Then you'll have to do as suggested above and nest 4 elements.

Is it really worth it?

ya i guess you could do

sry I don't follow. can someone write all of this down and working?

What, no "please"?

div.box { border: 5px solid #ff0000; } div.box span.b1 { border: 5px solid #ffff00; } div.box span.b1 span.b2 { border: 5px solid #ff3300; } div.box span.b1 span.b2 span.b3 { border: 5px solid #00ff00; }

I think this will work, haven't tested it yet.

I prefer to avoid borders and simply nest the spans, make the display:block, give them a background color and a 1px margin

your way would probably work better, mine completly bombed once i got around to testing it

thx alot, but the border only effects the left and right borders, but not the top or bottom

yup, i already stated that it didn't work.
Try CT's way.

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
.box span{
display:block;
padding:4px;
background:blue;
}
.box span span{
background:yellow;
}
.box span span span{
background:green;
}
.box span span span span{
background:white;
}
.box {
padding:4px;
width:200px;
background:red;
}

because the spans are inline by default. change them to display: block and it will work. CT's example is just as good also.

Just sit back. CSS Creator will do all your work.

What the csscreator automagic code service? Ask a question and before your very eyes the html and css appears.

In the cases where I feel like a challenge and want to help somebody recreate their site, I don't mind helping re-do it at all, it stops me getting rusty and helps them too.

But this is getting silly now. The OP was suggested two different methods and then when pasting the given code in, simply complained it didn't work.

Sigh.