MyBB Community Forums

Could it be done? It has small details on the top and bottom



Edit: Maybe double border on top and bottom uhmm don't know if possible.

something like

#box{
background: #F0F0F0;
border-right: 1px solid #BCBCB5;
border-left: 1px solid #BCBCB5;
border-radius: 5px;
}

What you have isn't bad. Just change the border-left and right to just one plan border: #BCBCB5 solid 1px.

Yeah just throwing the colors Still need to know how to make the borders on top and bottoms

(2012-05-27, 08:55 PM)zero_X Wrote: [ -> ]Yeah just throwing the colors Still need to know how to make the borders on top and bottoms

border-top: #C0FFEE;
border-bottom: #C0FFEE;

Replace coffee with the color you want.

Well, you'd probably have to use 2 divs.

 
#box {
background: #F0F0F0;
border: 1px solid #BCBCB5;
border-radius: 5px;
}

#secondbox {
margin: 1px 0 1px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #CCC;
border-radius: 5px;
}

(2012-05-27, 10:29 PM)Eric J. Wrote: [ -> ]Well, you'd probably have to use 2 divs.

 
#box {
background: #F0F0F0;
border: 1px solid #BCBCB5;
border-radius: 5px;
}

#secondbox {
margin: 1px 0 1px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #CCC;
border-radius: 5px;
}

That made it, thanks a lot. Looks exactly the same

(2012-05-27, 10:29 PM)Eric J. Wrote: [ -> ]Well, you'd probably have to use 2 divs.

 
#box {
background: #F0F0F0;
border: 1px solid #BCBCB5;
border-radius: 5px;
}

#secondbox {
margin: 1px 0 1px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #CCC;
border-radius: 5px;
}

That code is not semantic. A better way would be to use box-shadow with a 1px inset.

Well, that still wouldn't accomplish what he wants, you can't get the 1px gap or a shadow on both the top and bottom in different colors. It may not be semantic but unless he has a predefined height for all the uses of it (In which case he could use a bg image), that seems to be the best option. Well, unless of course this was used: http://www.css3.info/preview/border-image/ But it's probably going to be more trouble and less compatible than using two divs.