CSS3圆角和虚线边框？

Question

CSS3是否可以创建一个同时具有圆角和虚线的边框？

我正在创建圆角边框，但它们看起来很实心，代码如下：

border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;

边框的其余部分为点状，但角落是实心的。

我知道这是特定于Firefox的，但现在没关系。

谢谢

- jmcmahon

---

现在我们不需要使用供应商前缀了。https://caniuse.com/border-radius - elliottregan

Answer 1

这是Firefox的一个漏洞。请查看该问题，Mozilla不支持在虚线和点线边框中使用圆角。

- Srinivas Reddy Thatiparthy

---

五年后，这个bug仍然存在.. :/ - dschu

这个问题将在Firefox的下一个版本中得到（最终）修复，该版本将于11月发布：“使用虚线和点状样式的边框圆角现在将以指定的样式呈现，而不是实心样式”。 - vard

Answer 2

我无意中找到了一个解决方案。

以下是代码:

background-color: none !important;
  border:none !important;
  border-top: 5px dotted #70c1bb !important;
    border-top-width:5px;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;

- Pbalazs89

Answer 3

我针对这个问题的解决方案是

background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;

确保点图像只是一个点，两侧有一些空白。之后你就可以了。

- Brady Edgar

Answer 4

是的，理论上你可以有点状和圆角边框，但实际上你可能会发现浏览器还不支持它。

- RoToRa

---

是的，我找到了错误报告 - https://bugzilla.mozilla.org/show_bug.cgi?id=382721 - jmcmahon

Answer 5

这两行代码将使您的边框变成圆角或点状。

• border: 4px; 我们设置边框大小以使其更加可见（取决于您）
• border-style:dotted none none none; 我们将 border-top-style: dotted; 和其他设置为 none

hr{
border: 4px;
border-style:dotted none none none;
/* border-style:none;
  border-top-style: dotted; */
width:100px;
}
  

<hr>

- Ashish Patel

Answer 6

一种解决方案是使用多个背景图像。您可以使用此方法为四个角指定不同的background-image。

您可能还想添加第五个图像作为中心背景图像（如果需要，可以重复）。

大致如下...

.dashed-rounded-border {

    border: 2px dashed blue;

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
    background-position: left top, right top, right bottom, left bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;

    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;

}

- ban-geoengineering

Answer 7

引用：使用这个会起作用

border-style: none;
border-top-style: dotted;
border-width: thick;

- Prachi Parashar