CSS | border-radius | 角を丸める

border-radiusはボックスの角を丸めるために使用するCSSプロパティです。border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radiusについても解説します。

全角を丸める	`border-radius`
左上の角	`border-top-left-radius`
右上の角	`border-top-right-radius`
左下の角	`border-bottom-left-radius`
右下の角	`border-bottom-right-radius`

`border-radius`の基礎

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

実行結果初期状態

sample

border-radiusに曲率半径を指定すると角が丸まります。以下は、30px、20px、10pxの例。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 30px;
}

実行結果30px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 20px;
}

実行結果20px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10px;
}

実行結果10px

sample

零(0)を指定すると丸みが無くなります。(デフォルト値)

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 0;
}

実行結果0

sample

複数の設定値

それぞれの角で異なる設定にするには、複数の値を指定します。

`border-radius`プロパティ
設定値の数	1つ目	2つ目	3つ目	4つ目
1つ	全ての角
2つ	左上と右下	右上と左下
3つ	左上	右上と左下	右下
4つ	左上	右上	右下	左下

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10px 20px;
}

実行結果10px 20px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10px 20px 30px;
}

実行結果10px 20px 30px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


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

実行結果10px 20px 30px 40px

sample

`border-top-left-radius`

border-top-left-radiusは左上のborder-radiusを指定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-top-left-radius: 20px;
}

実行結果border-top-left-radius

sample

`border-top-right-radius`

border-top-right-radiusは右上のborder-radiusを指定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-top-right-radius: 20px;
}

実行結果border-top-right-radius

sample

`border-bottom-left-radius`

border-bottom-left-radiusは左下のborder-radiusを指定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-bottom-left-radius: 20px;
}

実行結果border-bottom-left-radius

sample

`border-bottom-right-radius`

border-bottom-right-radiusは右下のborder-radiusを指定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-bottom-right-radius: 20px;
}

実行結果border-bottom-right-radius

sample

％で指定する方法

曲率(きょくりつ)半径を直径の%で指定することができます。以下は10%、30%、50%の例です。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10%;
}

実行結果10%

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 30%;
}

実行結果30%

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 50%;
}

実行結果50%

sample

50%;にすると楕円(だえん)になることが分かります。

複数の設定値

それぞれの角で異なる設定にするには、複数の値を指定することもできます。

`border-radius`プロパティ
設定値の数	1つ目	2つ目	3つ目	4つ目
1つ	全ての角
2つ	左上と右下	右上と左下
3つ	左上	右上と左下	右下
4つ	左上	右上	右下	左下

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10% 20%;
}

実行結果10% 20%

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10% 20% 30%;
}

実行結果10% 20% 30%

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10% 20% 30% 40%;
}

実行結果10% 20% 30% 40%

sample

応用

扇形

border-○-○-radiusを使って特定の角だけを100%にすると、扇形なります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-top-left-radius: 100%;
}

実行結果border-top-left-radius

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-top-right-radius: 100%;
}

実行結果border-top-right-radius

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-bottom-left-radius: 100%;
}

実行結果border-bottom-left-radius

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-bottom-right-radius: 100%;
}

実行結果border-bottom-right-radius

sample

横軸と縦軸で異なる曲率半径

横軸方向と縦軸方向で異なる曲率半径を指定することもできます。設定は(横軸方向)/(縦軸方向)と書きます。以下は40px / 10pxと10px / 40pxの例です。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 40px / 10px;
}

実行結果40px / 10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 10px / 40px;
}

実行結果10px / 40px

sample

複数の設定値

複数の設定値を指定することもできます。以下は2つの設定値を指定した例です。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-radius: 0 10px/40px;
}

実行結果0 10px/40px

sample

border-〇-〇-radiusに対して

border-top-left-radiusなどに対しても横軸と縦軸で異なる曲率半径を指定できます。その場合は 1つ目の設定値が横軸方向、2つ目の設定値が縦軸方向になります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  background-color: #cec;           /* 背景 */
  border:           5px solid #393; /* 境界線 */
  display:          inline-block;   /* インライン・ブロック要素 */
  padding:          20px;           /* 内側の余白 */
}

CSS


.sample {
    border-top-left-radius: 10px 40px;
}

実行結果border-top-left-radius: 10px 40px

sample

border-radiusの基礎

複数の設定値

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

％で指定する方法

応用

扇形

横軸と縦軸で異なる曲率半径

`border-radius`の基礎

`border-top-left-radius`

`border-top-right-radius`

`border-bottom-left-radius`

`border-bottom-right-radius`