CODEWITHSUNDEEP
cssborder
Tara
Tara

Reputation: 1598

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

Upvotes: 74

Views: 203140

Answers (11)

Erick Willian
Erick Willian

Reputation: 4329

Maybe you can use Position: "Relative" to fix it

All the other answers can be helpful, but what worked for me it was using the position relative because some child element was overlapping my border.

position: 'relative',
border: '2px solid #000'

Upvotes: 1

user19693683
user19693683

Reputation: 21

You cannot shorthand concept in the border. Simply use :- borderWidth: '1px', border: 'solid #BDBDBD' // This is color which u can as per ur need.

Upvotes: 0

Co ti
Co ti

Reputation: 144

Check if somewhere in a code you are not using this style:

border-top: none;

Or any other variation of border-{side}: none.

Upvotes: 0

priya jani
priya jani

Reputation: 41

You forget to add Border style, Do this

border-style: solid

Or you can write

border: 3px #CDCDCD solid

Upvotes: 4

Aman Fangeria
Aman Fangeria

Reputation: 11

In latest version, i just experienced to get a border you have to first set the border-style. Then, the rest border width or color is considered.

border-style: solid;
border-width: 2px;
border:blueviolet;

Upvotes: 0

Dan
Dan

Reputation: 59

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

Upvotes: 4

Anil Singhania
Anil Singhania

Reputation: 845

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;

Upvotes: 11

Šime Vidas
Šime Vidas

Reputation: 185873

Do this:

border: solid #000;
border-width: 0 1px;

Live demo: http://jsfiddle.net/aFzKy/

Upvotes: 148

Ken Ray
Ken Ray

Reputation: 2528

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.

Upvotes: 5

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124758

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;

Upvotes: 3

Rudi Visser
Rudi Visser

Reputation: 21969

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;

Upvotes: 21

Related Questions