Border does not show up

问题:

My border is not showing up around my image, I'm not quite sure what the issue could be. I just need a small black border around the photo. My website is http://www.welovetile.com. I can't figure out what the problem could be. Thanks.

CSS:

#kitchen {
        height:250px;
        width:346px;
        background-image:url(images/kitchenbg.jpg);
    }

        #kitchen img
        {   
            top: 50%;
            left: 50%;
            width: 316px;
            height: 228px;
            margin-top:11px;
            margin-left:15px;
            border-color:#000000;
            border-width:thin;
        }

HTML:

<div id="kitchen">
    <img src="images/kitchen.jpg" alt="Kitchen Tile Job"/>
</div>

回答1:

Borders have three main pieces: a width, a style, and a color; the style is required for any of the others to work.

Try adding the style:

border-style: solid;

Also, you can specify all these in the same line of css:

border: thin solid black;

Updated

As pointed out by Wesley, border-style is the only required one.

From http://www.w3schools.com/css/css_border.asp :

None of the border properties will have ANY effect unless the border-style property is set!

回答2:

You can put border width/style/color in one row like this:

Border: 1px solid black;

回答3:

You're missing:

border-style: solid;

回答4:

Add a border style property as well, for example border-style: solid;.

回答5:

try this:

border: 1px solid #F4F1E8;
box-shadow: 1px 1px 3px #4C4843;