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>
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!
You're missing:
border-style: solid;
You can put border width/style/color in one row like this:
Border: 1px solid black;
try this:
border: 1px solid #F4F1E8;
box-shadow: 1px 1px 3px #4C4843;
Add a border style property as well, for example border-style: solid;.
Related
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
I have a table with rounded corners on the bottom, created with:
border-bottom-left-radius:pixel;
and same for the right bottom.
When I add:
bottom-border-dotted;
border-bottom-color:white;
the dotted white border appears correctly (rounded), but the table bottom reverts back to a rectangle. I have a solid background color in this table. When I replace" bottom-border-dotted, with border-bottom-solid, with the same white color everything is fine.
I just love the dotted border, especially at Christmas.
I think you have some errors in the CSS. F.e.: bottom-border-dotted; is not valid CSS. You should use border-bottom: 3px dotted black; or border-bottom-style: dotted;.
Try this example (see JSFiddle)
HTML
<div></div>
CSS
div {
display: inline-block;
width: 300px;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 3px black;
background-color: #cccccc;
border-bottom: 3px dotted black;
}
Result
Above code will create something like this:
I have a question regarding the div element border
I am trying to create bunch of divs that acts like a table
so
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>
My css is
.div{
border: solid 1px black;
}
All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.
I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?
Thanks a lot!
Remove the top border from every element except of the first one.
.div {
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
}
.div:first-child {
border-width: 1px;
}
Here's an example of the difference.
did you tryed write something like this :
.div {
border:1px solid black;
border-bottom:0;
}
.div:last-child {
border-bottom:1px solid black;
}
Try to add this to your styles.
<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>
Then add this to your body:
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>
I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e
this is my CSS of a DIV Tag for a Marker /ToolTip .
<div class="flotr-mouse-value">
position:absolute;
z-index:1;
background: #FFD772;
height: 75px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
position: absolute;
box-shadow: 3px 3px 3px #666;
left: 50px;top: 50px;
width: 150px;
height: 80px;
</div>
Waht i want is that , to have a down arrow at the bottom of the border similar to as shown here
http://www.tiikoni.com/tis/view/?id=fa381ec
I have tried modifying the below attribute , but of no use
border-bottom:
You can make a triangle by using code like:
border-color: #ff0 transparent transparent transparent;
It looks like this:
Here's the code for that example http://jsfiddle.net/hyH48/
There are a lot of limitations (for isntance the box shadow won't work for the triangle), but it doesn't use any images, and is pure CSS.
I used #RichBradshaw's answer but elaborated on it. While he's correct in that it's not possible (or at least very difficult) to add a shadow to the arrow, I achieved the effect by utilizing the :before and :after pseudo elements. Use Rich's code within a :after selector, and then in the :before selector, create the same arrow, offset in the direction you want your shadow, with a transparent color.
Here is an example! jsfiddle
yes, you can do it from css check this
arrow with border on it:
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
}