圆桌角落

Question

你可以帮我制作桌角吗？我已经尝试了简单的border-radius，但是这只是将角落分开。这是由我的浏览器（Firefox）还是它的错误？ Jsfiddle - http://jsfiddle.net/vuys8eef/

Answer 1

您需要圆你的表的第一个和最后一排也是第一个和最后一个栏的角落。

事情是这样的：

table tr:first-child th:first-child { 
    border-top-left-radius:10px 
    } 


table tr:first-child th:last-child { 
    border-top-right-radius:10px 
} 

table tr:last-child td:first-child { 
    border-bottom-left-radius:10px 
} 

table tr:last-child td:last-child { 
    border-bottom-right-radius:10px 
} 

你可以看到你更新fiddle

Answer 2

您正在将它应用于错误的元素，请改用它。

td, th{ 
    border-radius: 5px; 
} 

CODEPEN DEMO

Answer 3

你好你的代码是好的，但你可以使用overflow:hidden表上隐藏的内容里面。这是要做到这一点:)

例如JSFIDDLE