css question

[Dawson]

is it possible to have a box 50x50px but then, only using css


have a 2px border along the bottom red
then a 1px border along the bottom green


eg:


http://uploadir.com/u/lq419amz




I know it's possible to have one color i.e just the green or just the red but I don't know if you can do one under the other.


Thanks!

[Nli.]

Use
border-top and
border-bottom

[Dawson]

No, because I don't want a border at the top I want it at the bottom, one underneath the other like my example picture shows.

[hamheyelliot]

You can achieve the effect in a way that supports most browsers with a bit of HTML trickery, by using border-bottom: 2px solid red on the top box, then stacking a box below it and using border-top: 1px solid green. That would give the impression the border is from the same box.

If you want a really easy way to do it, sacrificing earlier browsers that don't support box-shadow, use box-shadow: 0 2px red, 0 3px green; and you'll get it right away.

[Mentor]

This can be done, although it requires a little bit of CSS trickery.

Give this a try (Browser support may be limited)


.box {
border: 2px solid red;
outline: 1px solid green;
}

An alternate trick is use the :before pseudo class to sneak in a secret extra div.


.box{border: 2px solid red; position:relative;}
.box:before{height:100%; width:100%; position:absolute; display:block; content:''; border:1px solid green; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}​

You'll find a much fuller discussion over on http://stackoverflow.com/questions/3906983/css-two-color-borders if your really interested, plus about 5 or so additional methods on top of what i just suggested :)