CSS border curvature - css

Question

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>

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.