Html 边界半径+；背景色==裁剪的边框

考虑应用了

边框半径

、

边框

和

背景色

CSS属性的

div

：

废话

添加一些填充，或者外部元素上的背景色是否可以为div添加一些填充？这样背景颜色就不会冲突。

添加以下CSS规则：

tr:first-of-type td:first-child {
    border-top-left-radius: 5px;    
}

tr:first-of-type td:last-child {
    border-top-right-radius: 5px;    
}

tr:last-of-type td:first-child {
    border-bottom-left-radius: 5px;    
}

tr:last-of-type td:last-child {
    border-bottom-right-radius: 5px;    
}

---

请参阅更新。是否必须使用表格？下面是一个使用DIV的示例：

HTML:

---

您可以通过应用

overflow:hidden到带有边框的元素。我认为这是一种更干净的方式。
尝试
溢出：在外部
div中隐藏
：



废话
您也可以将边界半径添加到子元素中



废话
出于设计原因，我无法添加填充。正如我提到的，我的真实应用程序中的背景颜色是交替的行颜色，这在外部元素上是不可能定义的。不，背景颜色与边框齐平对我来说很重要。（即，我不想要）这很好。我更喜欢一个在IE8中工作的版本，但如果它是最好的，我会接受这个版本。但是，由于这使用了
最后一个孩子
，它在IE8中也不起作用，所以我认为最好使用melhosseiny的解决方案。（它变短了）我明白了，你可以为第一行和最后一行创建一个包含边界半径样式的唯一类。这是更好的答案。是的，它对我有用，但它做什么呢？只是一个普通的黑客？还是有正当的理由？感谢洛蒂特隐藏溢出的背景以外的父母，干净和简单的解决方案。
<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

.container {
    width: 100%;
}

.leftHalf {
    float:left;
    width:50%;
}

.rightHalf {
    float:left;
    width:50%;
}
.row {
    float: left;
    width: 100%;
}

#container .row:nth-child(odd) {
    background-color: #EEEEEE;
}
#container .row:first-child {
    border-top: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}
#container .row:last-child {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
}
#container .row {
    border-left: 1px solid black;
    border-right: 1px solid black;
}