【CSS】border-radiusでtableを丸くする方法

CSS

tableにborder-radiusプロパティを適用することで、テーブルを丸くすることができます。

table {
    border-radius: 20px; /* 半径20px */
}

上記のようにborder-radiusに20pxという値を指定することで、tableが丸くなります。同じように上下左右それぞれに設定することも可能です。

table {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

ただし、tableに対してborder-radiusを設定すると、表のセルの枠線もまとめて角丸になるため、セル毎に角丸にしたい場合は、それぞれのセルに対して設定をする必要があります。

table td {
    border-radius: 10px; /* 半径10px */
}

また、テーブルの周囲だけを角丸にするためには、tableに対してborder-radiusを設定し、table>*に対してborderを適用することで可能です。

table {
    border-radius: 20px;
}
table > * {
    border: 1px solid #ccc;
}

これらの設定方法を使用することで、tableの角を丸くすることができます。