带边框半径的桌子上的虚线边框

Question

我的桌子底部有圆角，用：

创建

border-bottom-left-radius:pixel;  

右侧底部相同。

当我添加：

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

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

我喜欢虚线边框，特别是在圣诞节。

Answer 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;
}

<强>结果

上面的代码将创建如下内容：