Css 圆角

我想知道如何使顶部边框像下图中的红线一样？我尝试了

边界半径

，但我不知道如何使顶部边界的底部圆化

---

我认为使用单个div是不可能的。但是，您可以在其上方放置一个div，并使用

边界半径进行技巧操作


.inbox{
宽度：200px；
}
#上边框{
边框：红色4px实心；
边界半径：4px；
}
#试验{
填充：4px；
高度：200px；
背景：#EEEEEE；
}

JS-Bin
这是完整的代码，希望对您有所帮助


.container{
宽度：320px；
高度：520px；
背景：#fff；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
边框：1px实心#e4；
}
.红色边框{
背景：红色；
宽度：100%；
高度：10px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
我会使用
：before
创建一个可以设置样式的伪元素，因为它只用于表示，所以有一个空元素将是不必要的冗长

下面是一个如何做到这一点的示例：


.splitter{
边框：1px实心#ddd；
边界顶部：0；
}
.拆分器：之前{
内容：''；
显示：块；
位置：相对位置；
顶部：-5px；
宽度：100%；
高度：8px；
背景色：红色；
边界半径：100px/70px；
}
.myContent{
填充：0 20px；
}

反应的或有棱角的
我必须参加实习

展示您尝试过的内容