Блог

Не мог бы кто-нибудь объяснить, почему у меня такая изогнутая граница, как показано на прилагаемом изображении?

Вот мой CSS:

 .fourth-article-category {
    border-bottom: 4px solid #5692b1;
}
article {
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
}
 

А также 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"><a href="#">6 Comments</a></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>
 

Граница не изогнута, она находится под углом.

Все границы соответствуют углам.

Посмотрите эту демонстрацию — JSfiddle

 .box  {

    width:50px;
    height:50px;
    margin:50px;
    border:25px solid red;
    border-bottom:25px solid blue;
}
 

Поскольку вы используете однопиксельную границу, вы сталкиваетесь с проблемами субпиксельного рендеринга.

Редактировать —

В качестве альтернативы вы можете использовать рамку-тень вместо нижней границы

CSS

 .box  {   
    width:50px;
    height:50px;
    margin:50px;
    border:5px solid red;
    border-bottom:none;
    box-shadow: 0 5px 0px 0px black;
}
 

Окно-Теневая демонстрация

Это абсолютно нормально: у вас разные border-width значения и разные border-color значения для горизонтальных и вертикальных границ. Поскольку граница между ними наклонена, появляется ваша «кривизна». Смотрите это здесь в действии: http://jsfiddle.net/qqTc2/4 / (бит «наведения»)

Вы могли бы добиться большего успеха, если бы использовали два внешних раздела, которые образуют границы. Внешний div — верхний и нижний, а внутренний — левая и правая границы.

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

}
 

она не изогнута .. если вы используете один и тот же цвет границы со всех 4 сторон, вы можете определить это

Ссылка

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

Я думаю, это должно сработать для вас.