すべて正方形や長方形の整頓されたレイアウトは、ユーザーが信用しやすい傾向にあります。

しかし、一方で「なんかカッチリしすぎて逆に見づらい」など、お堅いイメージも。

あまりにも真面目で、かしこまった印象を感じてしまうと、構えてしまうユーザーも多いので塩梅が難しいところでしょう。

特に、LPなどで商品を販売する時には、ボタンを押しずらくなってしまうので注意が必要です。

そこで今回は、HTML要素の「かど」を「まるく」する方法を解説します。

この記事を読んでわかる内容は、以下の通りです。

HTML要素の角を丸くできるborder-radiusプロパティを使用して、様々な形を作る方法も解説します。

「角が丸いボタンを作りたい」

「border-radiusの使い方を知りたい」

などと思っている方は、ぜひ最後までみてくださいね。

border-radiusとは

HTML要素の角を丸くするには、border-radiusプロパティを使用します。

border-radiusは、要素の四隅に対して角の丸みを調整することができるプロパティで、主に、以下のように使用します。

border-radius: （数値）px;

数値で指定するのが基本ですが、指定できる単位は豊富。以下のように様々な単位で指定可能です。

代表的で、使いやすいのは「px」と「%」でしょう。

border-radiusで指定できる値は最大で8つの値を指定できる！

四隅の角の丸みを設定できるborder-radiusプロパティですが、実は、最大で8つもの値を指定することが可能！

8つの値を指定する場合は、以下のように値を「/（スラッシュ）」で区切りましょう。

border-radius: 〇% 〇% 〇% 〇% / 〇% 〇% 〇% 〇%;

スラッシュで区切った前の値は「水平の長さ」、後ろの値は「垂直の長さ」を定義しています。

いびつな形を表現したい時に、用いられる方法です。

実際にborder-radiusを使っていろんな形のボックスを作ってみよう！

border-radiusプロパティを使用することで、要素の角を丸くできるだけでなく、いびつな形を表現できることがわかりました。

ここからは、このようなborder-radiusプロパティの特性を活かして、様々な形を作っていきましょう！

今回border-radiusプロパティを使って作成する形は、以下の7つ。

では、それぞれの具体的な方法を詳しく解説していきます。

1.ボックスの枠をかどまるにしてみよう

<!-- HTMLコード -->
<div class="border-radius">border-radiusでかどまるを作る</div>

/* CSSコード */
.border-radius {
  width: 300px;
  height: 100px;
  background-color: #eee;
  border-radius: 15px;
  line-height: 100px;
  text-align: center;
}

▼ブラウザ表示▼

2.丸を作る方法

<!-- HTMLコード -->
<div class="border-radius">border-radiusでかどまるを作る</div>

/* CSSコード */
.border-radius {
  width: 300px;
  height: 300px;
  background-color: #eee;
  border-radius: 50%;
  line-height: 300px;
  text-align: center;
}

▼ブラウザ表示▼

3.楕円形を作る方法

<!-- HTMLコード -->
<div class="border-radius">border-radiusでかどまるを作る</div>

/* CSSコード */
.border-radius {
  width: 300px;
  height: 100px;
  background-color: #eee;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

▼ブラウザ表示▼

4.いびつな形を作る方法

<!-- HTMLコード -->
<div class="border-radius">border-radiusでかどまるを作る</div>

/* CSSコード */
.border-radius {
  width: 300px;
  height: 200px;
  background-color: #eee;
  border-radius: 54% 46% 67% 33% / 30% 55% 45% 70% ;
  line-height: 200px;
  text-align: center;
}

▼ブラウザ表示▼

5.半円を作る方法

<!-- HTMLコード -->
<div class="border-radius"></div>

/* CSSコード */
.border-radius {
  width: 75px;
  height: 150px;
  background-color: #eee;
  border-radius: 75px 0 0 75px;
  line-height: 150px;
  text-align: center;
}

▼ブラウザ表示▼

6.ハート形を作る方法

<!-- HTMLコード -->
<div class="border-radius"></div>

/* CSSコード */
.border-radius {
  width: 200px;
	height: 200px;
	position: relative;
}

.border-radius::before{
	content: "";
	position: absolute;
	left: 80px; 
  top: 0; 
	width: 80px;
	height: 120px;
	background: #eee;
	border-radius: 120px 80px 0 0;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
}

.border-radius::after {
	content: "";
	position: absolute;
	left: 0; 
	top: 0; 
	width: 80px;
	height: 120px;
	background: #eee;
	border-radius: 80px 120px 0 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

▼ブラウザ表示▼

7.扇形を作る方法

<!-- HTMLコード -->
<div class="border-radius"></div>

/* CSSコード */
.border-radius {
  position: relative;
	width: 100px;
	height: 100px;
}

.border-radius::after{
	content: "";
	position: absolute;
	border: solid #eee;
	border-width: 100px 100px 0 0;
	border-top-right-radius: 100px;
}

▼ブラウザ表示▼

かどまるの大きさを調整したい時には「角丸作成ジェネレーター」が便利！

いびつな形を作って、おしゃれなWebサイトに仕上げたい時、どこをどのぐらいの数値に指定すれば良いのかわからない方も多いでしょう。

そこで便利なのが「角丸作成ジェネレーター」です！

中央にある丸のような四角のようなパレットの、4カ所の点をクリックしながら動かすだけで、ゆがみを調整することができます。

自分の理想の形に整えたら、パレットの下にある「border-radius:」のコードをコピーして利用するだけ！

視覚的に操作できるので、初心者の方でも簡単に利用できますよ。

FANCY-BORDER-RADIUS

border-radiusプロパティが効かない原因と対処法

border-radiusプロパティが効かない場合に考えられる原因は、主に以下の4つ。

プログラミング初心者の方や、初めてborder-radiusプロパティを使用する方は、事前に確認しておきましょう。

1.そもそも記述が間違っている

数値や「/（スラッシュ）」、様々な単位を設定できるborder-radiusプロパティでは、記述を間違えてしまうケースがほとんど。

border-radiusプロパティに限らず、CSSが反映されない原因としてもよくあることです。

「/」の位置を間違えていないか、数値を多く（少なく）指定していないか、単位がおかしくなっていないかなどを確認しましょう。

2.親要素にのみ指定している

border-radiusプロパティの記述に誤りがない場合には、親要素にのみborder-radiusを指定している可能性が考えられます。

border-radiusプロパティは、子要素に引き継がれないため、親要素にのみ反映されることになります。

上記の場合には、親要素と子要素の両方にborder-radiusプロパティを指定するか、overflow: hiddenを指定することで解決できます。

3.tableタグに指定している

border-radiusプロパティは、テーブルに対しては効かない場合があります。

tableタグに、borer-collapse: collapseが設定されていると効かないので、border-collapse:separateを設定しましょう。

4.Safariの問題

Safari固有のバグで、border-radiusプロパティが効かないこともあります。

対処法は、以下のようにz-indexを指定する方法です。

/* CSSコード */
.border-radius {
  border-radius: 50%;
  background-color: #eee;
  z-index: 1;
}

border-radiusで「かどまる」のボックスを作ってみよう！

今回は、HTML要素のかどをまるくするborder-radiusプロパティの使い方を解説しました。

以下は、この記事のまとめです。

border-radiusプロパティを使いこなせるようになれば、角を丸くするだけでなく、円やハート形なども作れるようになります。

角丸作成ジェネレーターなどの便利なツールも利用して、様々な形をborder-radiusプロパティで作ってみましょう！