边框半径不起作用

Question

我正在制作一个基本的 div，但是出现了一些奇怪的问题，border-radius: 7px 没有被应用到它上面。

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

- Matt

---

有时候你可以将border-radius应用于包装容器，它会很好地工作。例如，我试图将border-radius设置为<a>标签内部的div，但它不起作用。但是当我直接将border-radius应用于<a>标签时，它就像魔法一样奏效了。 - Sharpey

我曾经遇到过同样的问题，我是这样解决的，在我的情况下，移除“.btn”类解决了我的问题，因为我正在使用Bootstrap。 - malibil

Answer 1

对于可能遇到这个问题的人。我的问题是边框合并(border-collapse)。它被设置为:

border-collapse: collapse;

我将它设为:

border-collapse: separate; 

问题得到了解决。

- RoboYak

---

我刚刚在内联CSS中加入了"border-collapse: separate;"，它起作用了！谢谢！ - Danny

很抱歉这篇文章更新得晚了。在阅读了W3C的border-collapse规范后，我可以确认这是语义上正确的答案，并且似乎具有不错的跨浏览器兼容性。 - Matt

当我将border-collapse设置为separate时，它从所有<tr>元素中删除了所有边框。 - Eggon

过去我曾经遇到类似的问题，因为其他不应该设置的CSS，然后纠正一个错误会显示另一个错误。如果您创建一个CodePen或其他东西，那么更容易看出可能存在的问题。 - RoboYak

不正常工作。使用“separate”会在行和列之间创建带有空格的不同表视图，这是不合适的。 - glushkina1

Answer 2

对于将来遇到这个问题的任何人，我不得不添加

perspective: 1px;

最终的工作代码是将border radius应用于我正在操作的元素。

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

编辑我的答案以包含其他人的一些澄清：通常你只需要overflow: hidden;。在我的情况下，这也不起作用，我需要添加perspective: 1px;。我认为这可能是由于我对具有边框半径的元素应用了3D CSS变换引起的。

- Ethan May

---

overflow: hidden 属性对于大多数容器来说已经足够。 - Philipos D.

溢出：隐藏，FTW - gdbj

角度？？这可真奇怪！ - see sharper

我希望有人能够解释为什么这对我起作用。99.999%的情况下，您只需要在容器上使用overflow:hidden，但有时它根本不起作用。这非常奇怪。 - Ethan May

我尝试了上面的边框合并，但没有起作用 - 但这些（溢出和透视）也让我成功了。谢谢！ - Christopher

Answer 3

补充一下@ethanmay的答案：(https://dev59.com/p2gu5IYBdhLWcg3w5LBa#44334424)...

如果带有圆角的

中有内容，则必须设置overflow: hidden，否则子

的溢出可能会给人留下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/

- jnotelddim

---

这个答案对我有用。其他的都没有。具体来说，我正在处理嵌套的<ul>和<li>标签。 - Luke Shinn

谢谢你对我的回答进行了进一步的扩展！:) - Ethan May

Answer 4

我只是强调 @Ethan May 答案中的一部分，即

overflow: hidden;

它很可能适用于你的情况。

- Baldráni

---

也适用于我。 - Mikhail Nikiforov

Answer 5

如果您有父元素，则父元素必须具有overflow：hidden;属性，因为如果子内容从父边框溢出，则边框将可见。否则，您的边框半径正在起作用，但它被子内容隐藏了。

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

- user9083933

Answer 6

由于某些原因，您的padding: 7px设置正在使border-radius无效。将其更改为padding: 0px 7px

- jakee

---

谢谢。这是因为盒子成功应用了border-radius，但由于填充的原因，它无法被看到。 - Juan Sánchez

Answer 7

尝试在你的css中添加 !important 。这对我有用。

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

- syadiqfaliq

---

我的问题是在别处有了!important，所以它覆盖了我的属性。 - CallSign-Filter

Answer 8

在你的

CSS中，使用：

用法

            float:right 

代替

             float:left

- Usman

---

为什么？这与所问问题无关。 - Alex Chamberlain

border-radius已成功应用于该div，但它的浮动不正确。 - Usman

这在Chrome上无法解决。 - Alex Chamberlain

@Alex，我不知道你使用的是哪个版本的Chrome，但在我的Chrome 19.0.1084.56和FF 13.0上都可以正常工作。 - Usman

我尝试在浏览器中设置 float: initial，这解决了我的问题。然后我注意到，在删除该属性后它也可以正常工作，我认为在我的情况下问题出现在浏览器上：Chrome 版本 55.0.2883.87（64 位）。 - Arman Yeghiazaryan

Answer 9

现在我正在使用类似于以下的浏览器工具包：

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

- Rohit Azad Malik

---

你试过这个吗？它不能解决这个特定的问题。 - Alex Chamberlain

Answer 10

您的问题与您设置的border-radius无关。打开Chrome并按下Ctrl+Shift+j，然后检查元素。取消勾选width，边框将具有圆角。

- Alex Chamberlain