【CSS】「border-radius」使い方メモ／角を丸くする

border-radius とは

要素の四隅の角を丸くするためのCSSプロパティーのことです。

背景も画像もこれで丸くすることができます。

半径10pxの角丸

border-radius: 10px;

下記は、左上、右上、右下、左下　の順で書いてあります。

div {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

短縮したものもあります。

左上、右上、右下、左下の順で書いていきます

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

下記は葉っぱみたいな要素になります。

左上と右下が50pxになっています。

.img2 { border-radius: 50px 3px; }