Webデザイナーブログから学ぶホームページ制作

ボタン、ボックス、画像の角を丸くする場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「border-radius」プロパティを使うことでボックスを角丸にすることができます。

今回は、CSSでボタン、ボックス、画像の角を丸くする方法を解説します。

「border-radius」は、左上、右上、右下、左下の順番に4つ角の大きさに「％」「em」「rem」「px」の値を使って調整できます。
「border-radius」は、「border」の指定が無くても設定できます。

「border-radius」の基本的な使い方は、ボタン、ボックス、画像に左上、右上、右下、左下の順番に値を設定します。

<div class="box1">
ボタン
</div>

.box1 {
  width:500px;
  height:300px;
  border-radius:10px 10px 10px 10px;
  background: #6cdeff;
}

基本的な使い方としてすべての角を同じ大きさで丸くする場合は、3つの設定方法があります。
まとめて指定する設定や別々に設定することができます。

div {
  border-radius: 10px;
}

div {
  border-radius: 10px 10px 10px 10px; /*左上 右上 右下 左下*/
}

div {
  border-top-left-radius: 10px; /*左上*/
  border-top-right-radius: 10px; /*右上*/
  border-bottom-right-radius: 10px; /*右下*/
  border-bottom-left-radius: 10px; /*左下*/
}

それぞれの角を別々の大きさにする場合は、それぞれの「px」サイズを変更します。

box2 {
  width:500px;
  height:300px;
  margin:0 auto 5%;
  border-radius: 10px 30px 50px 70px; /*左上 右上 右下 左下*/
  background: #6cdeff;
}

角丸を応用すれば正円をつくることもできます。
「border-radius」で円をつくる場合は、border-radius: 50%;と4つ角を50%に指定します。
要素の高さや幅は同じサイズに指定します。

.box3 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  border-radius: 50%;
  background: #6cdeff;
}

角丸を応用すれば長丸をつくることもできます。
「border-radius」で長丸をつくる場合は、border-radius: 100vh;と指定します。

.box4 {
  width:300px;
  height:300px;
  margin:0 auto 5%;
  border-radius: 50%;
  background: #6cdeff;
}

角丸を応用すれば花の形をつくることもできます。
「border-radius」で長丸をつくる場合は、border-radius: 100vh;と指定します。

.box5 {
  width:300px;
  height:200px;
  margin:0 auto 5%;
  border-radius:70px 0 70px 0;
  background: #6cdeff;
}

「border-radius」は、最大8つの値を指定できます。
「border-radius」の今まで4つ指定していたサイズの後に「/」を入れて指定をします。

.box6 {
  width:300px;
  height:200px;
  margin:0 auto 5%;
  border-radius: 40% 80% 35% 65% / 50% 50% 70% 40%;
  background: #6cdeff;
}

「border-radius」プロバティは、ボタンの要素で使われることが多いので、覚えておくとよいです。
「border-radius」を指定することで、画像やWebサイト全体を柔らかい雰囲気になりますね。
四角いボタンや四角いイメージで見せてしまうとWebサイトが少し硬いイメージとして見えてしまうので、柔らかく表現するには使いやすいです。