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>
Using Inline Style attribute Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the inline property for adding the border. Step 2: Now, place the cursor inside the opening tag of that text around which we want to add the border.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
The syntax for the CSS border-width property (with 2 values) is: border-width: top_bottom left_right; When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With