20 replies [Last post]
CodilX
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2007-04-18
Posts: 5
Points: 0

Hi everyone

Is it possible to create a border with 4 different colors? If so, how?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

border-top-color: yellow;

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CodilX
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2007-04-18
Posts: 5
Points: 0

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CodilX wrote:uhh .. no

CodilX wrote:
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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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; }

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 28 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CodilX
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2007-04-18
Posts: 5
Points: 0

(No subject)

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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?

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

ya i guess you could

ya i guess you could do

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CodilX
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2007-04-18
Posts: 5
Points: 0

sry I don't follow. can

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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

What, no "please"? <div

What, no "please"?

Look Mom, I'm A Webmaster!!!!

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

your way would probably work

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CodilX
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2007-04-18
Posts: 5
Points: 0

thx alot, but the border

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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

yup, i already stated that

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

<!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;
}

Look Mom, I'm A Webmaster!!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 28 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CodilX wrote:thx alot, but

CodilX wrote:
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.

Triumph (not verified)
Anonymous's picture
Guru

Once again CSS Creator dot

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Triumph wrote:Just sit back.

Triumph wrote:
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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Triumph wrote:Just sit back.

Triumph wrote:
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.

Verschwindende wrote:
  • CSS doesn't make pies