边框0px虚线答案

【问题标题】：Border 0px broken line边框0px虚线
【发布时间】：2013-10-02 02:41:28
【问题描述】：

我正在尝试设置带有圆形边缘的顶部和左侧边框，但我的代码在底部和右侧给出了一条折线，如下图所示。将border-right-width 或border-bottom-width 设置为0px 无效。目前我只在 Chrome 上进行测试。

CSS如下：

border-top:10px solid #CC99CC;
border-left:5px solid #CC99CC;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-left-radius:10px;

【问题讨论】：

你可以发布 html 或更好的 jsfiddle 吗？
我们可以看到里面有两个link buttons，所以首先尝试删除它们，看看你是否得到正确的border，如果你得到它，那么肯定有div重叠的问题.
里面的按钮是带圆角的divs，和display:table-cell。

标签： html css border

【解决方案1】：

改为将边框样式应用于#wrapper：

body { 
    background-color: #000;
}

#wrapper {
    border-top:10px solid #CC99CC;
    border-left:5px solid #CC99CC;
    border-top-left-radius:10px;
    border-top-right-radius:5px;
    border-bottom-left-radius:10px;
}

http://jsfiddle.net/rezv2/2/

【讨论】：