[css] CSS Border Not Working

I've been trying to get a border on either side of my white container. It's just not showing. I've tried to put it in three different elements just in case! (see below). Any ideas on how to make it work?

#wrapper {
    width:1000px;
    background:#F4F4F4;
    padding-top:5px;
    border: 3px #CDCDCD;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;  
}

#casing {
    padding:0px 0px 0px 0px;
    background:#Fff;
    border: 0 1px 0 1px solid #000;
}   

#cover {
    border: 0 1px 0 1px solid #000;
}   

This question is related to css border

The answer is


I think you've just made up shorthand syntax for the border: property there =)

Try simply:

border-right: 1px solid #000;
border-left: 1px solid #000;

AFAIK, there's no such shorthand for border. You have to define each border separately:

border: 0 solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;

Use this line of code in your css

border: 1px solid #000 !important;

or if you want border only in left and right side of container then use:

border-right: 1px solid #000 !important;
border-left: 1px solid #000 !important;

Have you tried using Firebug to inspect the rendered HTML, and to see exactly what css is being applied to the various elements? That should pick up css errors like the ones mentioned above, and you can see what styles are being inherited and from where - it is an invaluable too in any css debugging.


The height is a 100% unsure, try putting display: block; or display: inline-block;