Hi everyone
Is it possible to create a border with 4 different colors? If so, how?
border-top-color: yellow;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
uhh .. no .. What I meant
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?
CodilX wrote:uhh .. no
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?
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
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
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
although i have not tried it and am positive it is not semantically correct could one do
blah
and just have each of them with a border and padding?
(No subject)
Then you'll have to do as
Then you'll have to do as suggested above and nest 4 elements.
Is it really worth it?
ya i guess you could
ya i guess you could do
sry I don't follow. can
sry I don't follow. can someone write all of this down and working?
What, no "please"? <div
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
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
your way would probably work better, mine completly bombed once i got around to testing it
thx alot, but the border
thx alot, but the border only effects the left and right borders, but not the top or bottom
yup, i already stated that
yup, i already stated that it didn't work.
Try CT's way.
<!DOCTYPE html PUBLIC
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;
}
CodilX wrote:thx alot, but
thx alot, but the border only effects the left and right borders, but not the top or bottom
because the spans are inline by default. change them to display: block and it will work. CT's example is just as good also.
Once again CSS Creator dot
Just sit back. CSS Creator will do all your work.
Triumph wrote:Just sit back.
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.
Triumph wrote:Just sit back.
Just sit back. CSS Creator will do all your work.
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.