边界半径不起作用答案

【解决方案1】：

致任何可能遇到此问题的人。我的问题是边界崩溃。设置为：

border-collapse: collapse;

我设置为：

border-collapse: separate;

它解决了这个问题。

【讨论】：

我刚刚添加了“border-collapse:separate;”到我的内联 CSS 并且它起作用了！谢谢！
对这篇文章的更新迟到表示歉意。阅读 W3C 上的边框折叠规范后，可以确认这是语义上的正确答案，并且似乎具有不错的跨浏览器兼容性
当我设置边框折叠以将其从所有元素中删除时。
我过去也遇到过类似的问题，因为其他 CSS 不应该设置，然后更正一个显示另一个错误。如果您创建了一个 codepen 或其他东西，就会更容易看出可能是什么问题。

【解决方案2】：

对于以后遇到这个问题的人，我不得不补充

perspective: 1px;

到我应用边框半径的元素。最终工作代码：

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}

【讨论】：

overflow: hidden 属性适用于大多数容器。
溢出：隐藏，FTW
透视？？好吧那很奇怪！
我很想有人解释为什么这对我有用。 99.999% 的时间你只需要溢出：隐藏在容器上，但有时这根本行不通。这很奇怪。
我尝试了上面的边框折叠但没有奏效 - 但这些（溢出和透视）也让它对我有用。谢谢！

【解决方案3】：

补充一点@ethanmay 的回答：(https://stackoverflow.com/a/44334424/8479303)...

如果 div 中的内容 具有弯曲的角，则必须设置 overflow: hidden，否则子 div 的溢出会给人以 border-radius 不起作用的印象。

<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
  <div style="background: red;">
      text!
  </div>
</div>

<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
  <div style="background: red;">
      text!
  </div>
</div>

JSFiddle： http://jsfiddle.net/o2t68exj/

【讨论】：

这个答案对我有用。其他人都没有。具体来说，我正在使用嵌套的
- 标签。

【解决方案4】：

我只是强调@Ethan May 回答的一部分

overflow: hidden;

它很可能会为您的情况工作。

【讨论】：

【解决方案5】：

由于某种原因，您的 padding: 7px 设置使边界半径无效。改成padding: 0px 7px

【讨论】：

谢谢。是框应用了border-radius成功，但是因为有padding，看不到。

【解决方案6】：

在您的 div class="social-box" css 中

使用

            float:right

而不是

             float:left

【讨论】：

为什么？这与提出的问题无关。
border-radius 已成功应用于该 div，但未正确浮动..
这不能在 Chrome 上修复它。
@Alex..我不知道您使用的是哪个版本的 chrome..但它在 Chrome 19.0.1084.56、FF 13.0 上对我来说很好用
我尝试在浏览器中设置float: initial，解决了我的问题。然后我注意到，删除该属性后它也可以工作，我认为在我的情况下浏览器中的问题：Chrome 版本 55.0.2883.87（64 位）

【解决方案7】：

尝试将 !important 添加到您的 CSS。它对我有用。

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}

【讨论】：

我的问题是其他地方有 !important 所以它踩到了我的属性

【解决方案8】：

如果你有父元素而不是你的父元素必须有溢出：隐藏；财产因为如果您的子内容从父边框溢出，则您的边框将可见。否则您的边框半径正在工作，但它被您的子内容隐藏。

.outer {
  width: 200px;
  height: 120px;
  border: 1px solid black;
  margin-left: 50px;
  overflow: hidden;
  border-radius: 30px;
}
.inner1 {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FF9933,white, green);
  border: 1px solid black;
}

<div class="outer">
  <div class="inner1">
     
  </div>
</div>

【讨论】：

【解决方案9】：

您的问题与您设置border-radius 的方式无关。启动 Chrome 并点击 Ctrl+Shift+j 并检查元素。取消选中width，边框会出现弯角。

【讨论】：

【解决方案10】：

现在我正在使用这样的浏览器套件：

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}

【讨论】：

你试过了吗？它没有解决这个特殊的问题。

【解决方案11】：

就我而言，我的 div 容器中有一个下拉列表，所以我不能使用 overflow: hidden 否则我的下拉列表将被隐藏。

受此讨论启发：https://twitter.com/siddharthkp/status/1094821277452234752 我在子元素中使用border-bottom-left-radius 和border-bottom-right-radius 来解决这个问题。

确保为每个孩子分别添加正确的值

【讨论】：

我遇到了同样的问题，position: absolute 容器切割下拉列表，因为我的容器需要一个 overflow: hidden 才能有一个工作 border-radius。我删除了overflow: hidden，并按照建议在每个角元素上应用了选择性边框半径。非常适合我。

【解决方案12】：

您可以在 html 文件中包含引导程序并将其放在样式文件下，因此如果您这样做，引导程序文件将像这样简要地覆盖样式文件

     // style file
     <link rel="stylesheet" href="css/style.css" />
     // bootstrap file
     <link rel="stylesheet" href="css/bootstrap.min.css" />

正确的方法是这样的

    // bootstrap file
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    // style file
    <link rel="stylesheet" href="css/style.css" />

【讨论】：

包含 Bootstrap 不是一个有效的答案。您建议用户通过添加用户需要下载的 34kb 资源来解决此问题。
@Matt 我认为他的意思是如果你使用引导程序，它可能无法工作，因为你的样式会被引导程序覆盖，因为导入顺序