CSS边界曲率

有人能解释一下为什么我有一个如所附图片所示的弧形边框吗

这是我的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>

A-Rod、欺诈和浪费资源
洋基队的钱，公众的时间
够了。我再也受不了了。把我们从奴役中解放出来
所有这些玩笑。好吧，所以我今天早上的愤怒不是类固醇-
诱导…尽管根据最近的讨论，这是合适的。
最近关于棒球的话题集中在提高表现上
药物。生物成因已成为新的巴尔科。新的A型杆
巴里·邦兹。我从各种媒体上听到的都是
像这样的问题

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

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

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

---

我认为这应该适用于美国。

边界不是弯曲的，而是成角度的

所有的边界都有一个角度

请参阅此演示-

由于使用单像素边框，因此会遇到亚像素渲染问题。

编辑-

作为替代，您可以使用长方体阴影而不是底部边框

CSS

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

---

边框不是弯曲的，而是成一定角度的

所有的边界都有一个角度

请参阅此演示-

由于使用单像素边框，因此会遇到亚像素渲染问题。

编辑-

作为替代，您可以使用长方体阴影而不是底部边框

CSS

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

---

它不是弯曲的。。如果您在所有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;
}

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

---

它不是弯曲的。。如果您在所有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;
}

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

---

这是绝对正常的：您有不同的

边框宽度

值，水平和垂直边框有不同的

边框颜色

值。 因为它们之间的边是成角度的，所以会出现“曲率”。在这里看到它的作用：（悬停位）

如果使用两个构成边界的外部div，您可以做得更好。 外部div是顶部和底部，内部是左右边界

<div class="outer">
    <div class="inner">Better</div>
</div>

---

这是绝对正常的：您有不同的

边框宽度

值，水平和垂直边框有不同的

边框颜色

值。 因为它们之间的边是成角度的，所以会出现“曲率”。在这里看到它的作用：（悬停位）

如果使用两个构成边界的外部div，您可以做得更好。 外部div是顶部和底部，内部是左右边界

<div class="outer">
    <div class="inner">Better</div>
</div>

---

你可以发布你的HTML太快乐了吗？我也已经根据HTML添加的内容更新了CSS部分。请看这里：你可以发布你的HTML太快乐了吗？我也根据HTML添加的内容更新了CSS部分。请看这里：那么我应该在这里使用包装器/内部元素来模拟边框吗？不，使用

框阴影

使用另一个选项编辑答案。其他选择包括一个伪元素，而不是仅用于样式设置的非语义元素。那么我应该在这里使用包装器/内部元素来模拟边框吗？不，使用另一个选项编辑答案，使用

框阴影
。其他选择包括一个伪元素，而不是仅仅用于样式设计的非语义元素。我不相信有任何css“unset”值。在最新的Firefox浏览器中，边框半径：unset；已检查。@jme11I不相信有任何css“unset”值。在最新的Firefox浏览器中，边框半径：unset；检查一下。@jme11