[解決済み] テーブルの角を丸くする CSSのみ

質問

検索しても検索しても、私の要求に対する解決策が見つかりません。

私は普通のHTMLのテーブルを持っています。そのテーブルの角を丸くしたい。 なし 画像やJSを使って、つまり純粋に CSSのみ . こんな感じ。

コーナーセル用の角丸加工と 1px セルに太い枠をつける。

今のところ、こんな感じです。

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

しかし、これではセルにボーダーがないままです。ボーダーをつけると、丸くならないんです。

何か解決策はありますか？

どのように解決するのですか？

FFとChrome（他はテストしていない）では、ボーダーを分離して問題ないようです。 http://jsfiddle.net/7veZQ/3/

編集：あなたのスケッチを比較的きれいに実装したのがこちらです。

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/