特定边界半径CSS

Question

我想创建一个在左上角和右上角有圆角的div，但不是底部的两个角。是否有-webkit-border-radius的值，只允许在div的某些角上有弯曲的边缘？

Answer 1

语法为：

border-radius: topleft topright bottomright bottomleft;

所以：

div {
  background: red;
  border-radius: 20px 20px 0 0;
  width: 100px;
  height: 100px;
}

<div></div>

Answer 2

每个角都有边界半径：

border-top-left-radius
border-bottom-right-radius
border-top-right-radius
border-bottom-left-radius

我认为mozilla需要像-moz-border-radius-topright

这样的前缀

Answer 3

您可以设置以下属性：

-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;

为了使用Firefox：

-moz-border-radius-bottomright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;