【CSS】角を丸める【border-radius】

DIVなどの角を丸めます。
ボタンなどに使うと柔らかい印象になりますよね。

border-radiusで角を丸めることが出来ます。

.main{
  border-radius: 10px; /*一括指定*/
}

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

.main{
  /*左上　右上　右下　左下*/
  border-radius: 10px 15px 20px 30px; 
}

ぐるっと一周を順番に指定することも

.main{
  border-top-left-radius: 10px;  /*左上*/
  border-top-right-radius: 15px;  /*右上*/
  border-bottom-right-radius: 20px;  /*右下*/
  border-bottom-left-radius: 30px;  /*左下*/
}

それぞれを個別に指定することもできます。
%指定することもできるので、すべてを50%で指定すれば、○になります。

さらに二つずつ値を指定する事で、歪ませることもできます。

.main{
  border-top-left-radius: 50px 100px;/*左上の幅　高*/
}

See the Pen
角を丸める2 by kurosu haruka (@skysound98)
on CodePen.

ややこしいですが、これも一括設定が出来ます。

.main{
  /*幅の左上　右上　右下　左下　/　高さの左上　右上　右下　左下*/
  border-radius: 30px 50px 30px 60px / 10px 100px 20px 100px;
}