ボックスの角丸を作るメモ

ボックスの角全部を丸くするには

div {
border-radius: 10px;
}

4つの角全部バラで指定するのは以下

div {
border-radius: 10px 20px 30px 40px;
}

background によって与えられた背景や、
img 要素で指定された画像の四隅も丸められます。

それぞれ別に丸めの指定をするなら

div {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
記事id:852 / 3623PV

関連記事