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;
}
Related
Could someone please explain why do I have such a curved border as outlined on the picture attached?
Here is my CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
And also HTML:
<article class="fourth-article-category">
<img src="img/article_4_photo.jpg" width="470" height="345" title="A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time" />
<section>
<div class="article-info"> <span class="date">25 July 2013</span> <span class="comments-quantity">6 Comments</span> </div>
<div class="article-preview">
<h3>A-Rod, A Fraud, And A Waste Of
Yankees Money, Public's Time</h3>
<p>Enough already. I can’t take it no more. Free us from enslavement
to all this banter. OK, so my fit of anger this morning is not steroid-
induced…though that would be fitting in light of recent discussions.
Baseball talk of late has centered upon performance enhancing
drugs. Biogenesis has become the new BALCO. A-Rod the new
Barry Bonds. And all I hear from various media types are
questions like.</p>
</div>
</section>
</article>
The border isn't curved, it's at an angle.
All borders meet an angles.
See this demo - JSfiddle
.box {
width:50px;
height:50px;
margin:50px;
border:25px solid red;
border-bottom:25px solid blue;
}
Because you are using a single pixel border you are encountering sub-pixel rendering issues.
EDIT -
As an alternaive you could use a box-shadow instead of a bottom border
CSS
.box {
width:50px;
height:50px;
margin:50px;
border:5px solid red;
border-bottom:none;
box-shadow: 0 5px 0px 0px black;
}
Box-Shadow Demo
It's absolutely normal: You have different border-width values and different border-color values for horizontal and vertical borders.
Since the edge between these is angled, your 'curvature' appears. See it here in action: http://jsfiddle.net/qqTc2/4/ (the 'hover' bit)
You could do better, if you used two outer divs, which form the borders.
The outer div is top and bottom, and the inner is the left and right border.
<div class="outer">
<div class="inner">Better</div>
</div>
.outer {
border: 4px solid black;
border-left-width: 0;
border-right-width: 0;
width: 102px;
}
.outer .inner {
border: 1px solid lightGray;
border-top-width: 0;
border-bottom-width: 0;
height: 100px;
text-align: center;
line-height: 100px;
}
its not curved.. if you use same border color all 4 sides you can identify that
LINK
CSS:
.fourth-article-category {
border-bottom: 4px solid #5692b1;
}
article {
border-left: 1px solid #5692b1;
border-right: 1px solid #5692b1;
border-radius:0;
}
CSS :
.outer-element {
border-bottom: 4px solid #5692b1;
border-radius: unset;
OR
border-radius: 0px;
}
.outer-element inner {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
I think this should work for u.
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 fixed header on my site that I'm working on. So the content of my page flows under the header and the header stays fixed at the top of the page. I can't use the border-radius function in css to create my rounded corners that I want because the page content background color shows on the outside of my rounded corners. So I have implemented two rounded corner images, one for the left and one for the right. My problem is, the images move a total of 1px when I zoom. No matter how much I zoom, it only moves a total of 1px and for the life of me, I can't seem to figure out the problem. I'm going to post a link to my site and maybe somebody can go through the html and css and try to figure this out. I also put a link to download my VB project to look at in Visual Studio. Any help would be appreciated thanks a lot.
Link to Webpage
http://aspspider.info/speeddemon8406/Default.aspx
Link to download VB project
http://www1.datafilehost.com/d/46288e83
#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}