背景画像なしでテーブルの角を丸くする？

背景画像を使用せずに、テーブルの角を丸くする（インライン）ことは可能でしょうか？

Brian Tompsett - 汤莱恩
編集された質問 10日 1月 2019 в 8:34
プログラミング
html css html-table
23日 12月 2011 в 5:30
まだビューはありません
ソリューション

ライブデモ]

table{
    background: red;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

sigh とインラインで...

<table style="background: red;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">

セルをdivに変換する意味がよくわからないのですが。

解説 (7)

この例では、すべてのコーナーに5pxの丸みを帯びたボーダーを作成します。

#example{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

もし、異なる角の丸みを帯びたボーダーを作成したい場合や、特定の角の丸みを帯びたボーダーを作成したい場合は、以下のコードを変更してください。

#example1{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

http://border-radius.com/ を参照してください。

解説 (0)

以下のコードを試してみてください。

#example1 {
-moz-border-radius: 5px;  
-khtml-border-radius: 5px;
-webkit-border-radius: 5px; 
}

詳しくはこちらのチュートリアルをご覧ください。

解説 (0)