テーブル内の角が丸みを帯びた

Question

私の3列テーブル（CSSテーブル）の丸い角を作成しようとしています。私は使用した：

border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 

私のCSSでは、私が得るものはトップイメージです。私のように見せたいのは、下の画像です。

これを行うことができること方法はありますか？あなたはそれぞれの行をしたい場合は、私が<div>でテーブル全体を囲むと、そのdiv要素の角を丸めることをお勧めしたい

Answer 1

は

Answer 2

Demo

table { border-radius:10px; } 

Answer 3

、CSSの擬似クラスを使用:first-childおよび:last-child。

デモ：http://jsfiddle.net/ThinkingStiff/R792K/

CSS：

table { border-spacing: 0; } 

td { 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    padding: 10px;  
} 

td:first-child { 
    border-top-left-radius: 4px;  
    border-bottom-left-radius: 4px;  
} 

td:last-child { 
    border-top-right-radius: 4px;  
    border-bottom-right-radius: 4px;  
    border-right: 1px solid black; 
} ​ 

HTML：

<table> 
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>4</td><td>5</td><td>6</td></tr> 
<tr><td>7</td><td>8</td><td>9</td></tr> 
</table>​ 

Answer 4

TD:first-child { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
} 

TD:last-child { 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}