border-radiusで辛そうなラーメンを丸め込む

プロバティについて

例えば、border-radius: 10px; と記述することにより4隅が角丸となります。
また、方向別に指定したい場合は border-radius: 左上右上右下左下; というように指定することも可能です。

border-radius: 10px;	4隅が10px角丸となります。
border-radius: 5px 10px 15px 20px;	左上5px、右上10px、右下15px、左下20pxが角丸となります。
border-top-left-radius: 10px;	左上が10px角丸となります。
border-top-right-radius: 10px;	右上が10px角丸となります。
border-bottom-right-radius: 10px;	右下が10px角丸となります。
border-bottom-left-radius: 10px;	左下が10px角丸となります。

コード下部にある7個のボタンより実際の挙動をご確認ください。

img {
  border-radius: 0;
}

img {
  border-radius: 100px;
}

img {
  border-top-left-radius: 100px;
}

img {
  border-top-right-radius: 100px;
}

img {
  border-bottom-right-radius: 100px;
}

img {
  border-bottom-left-radius: 100px;
}

img {
  border-radius: 50px 70px 30px 10px;
}