带有边框半径的表格上的虚线边框答案

【问题标题】：Dotted borders on table with border-radius带有边框半径的表格上的虚线边框
【发布时间】：2013-12-20 03:01:18
【问题描述】：

我有一张底部有圆角的桌子，使用以下方法创建：

border-bottom-left-radius:pixel;

右下角也一样。

当我添加时：

bottom-border-dotted; 
border-bottom-color:white;

白色虚线边框正确显示（圆角），但表格底部恢复为矩形。我在这张表中有一个纯色的背景颜色。当我用相同的白色替换“bottom-border-dotted”时，border-bottom-solid 一切都很好。

我只是喜欢虚线边框，尤其是在圣诞节。

【问题讨论】：

欢迎来到 SO！你能格式化你的代码吗？对于这个问题，jsfiddle 中的演示示例或类似内容会有所帮助。
您可能还想添加一些更通用的标签 - #css 在这里是合适的。

标签： css

【解决方案1】：

我认为您在CSS 中有一些错误。 F.e.：bottom-border-dotted; 不是有效的 CSS。您应该使用border-bottom: 3px dotted black; 或border-bottom-style: dotted;。

试试这个例子（见JSFiddle）

HTML

<div></div>

CSS

div {
    display: inline-block;
    width: 300px;
    height: 300px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: solid 3px black;
    background-color: #cccccc;
    border-bottom: 3px dotted black;
}

结果

上面的代码会创建这样的东西：

【讨论】：