概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

曲率半径
0px
2px
4px
6px
8px
10px
12px
14px
16px
％
0%
5%
10%
20%
30%
40%
50%
％
20%
40%
60%
80%
100%
引き数 ：2
sample1
sample2
引き数 ：3
sample1
sample2
sample3
引き数 ：4
sample1
sample2
sample3
sample4
左上
sample
右上
sample
右下
sample
左下
sample
楕円
sample
楕円
sample
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
div {

    border:             2px solid green;    /*  境界線 */

    background-color:   #cfc;               /*  背景色 */

    margin:             10px;               /*  外側の余白 */

    padding:            1em 2em;            /*  内側の余白 */

}
HTML : 適用するHTML
<div class="sample">

    sample

</div>
実行結果
sample

概要

境界線（border）の角を丸めるために使う。

以下のCSSプロパティについて説明する。

CSSプロパティ丸める角
border-radius引き数の数で指定。
border-top-left-radius左上
border-top-right-radius右上
border-bottom-right-radius右下
border-bottom-left-radius左下

border-radius

引き数の数により、丸める角を指定できる。

引き数の数第一引き数第二引き数第三引き数第四引き数
１つ全ての角
２つ左上と右下右上と左下
３つ左上右上と左下右下
４つ左上右上右下左下

引き数が１つの場会、（４つの）全ての角の丸みを指定する。

CSS : 引き数：１
.sample  {

    border-radius:   1em;

}
実行結果
sample
曲率半径

値が大きいほど、曲率半径は大きくなる。

CSS : 曲率半径
.px0    { border-radius:      0    ; }

.px2    { border-radius:      2px  ; }

.px4    { border-radius:      4px  ; }

.px6    { border-radius:      6px  ; }

.px8    { border-radius:      8px  ; }

.px10   { border-radius:      10px ; }

.px12   { border-radius:      12px ; }

.px14   { border-radius:      14px ; }

.px16   { border-radius:      16px ; }
HTML : 適用するHTML
<div class="px0"    >0px</div>

<div class="px2"    >2px</div>

<div class="px4"    >4px</div>

<div class="px6"    >6px</div>

<div class="px8"    >8px</div>

<div class="px10"   >10px</div>

<div class="px12"   >12px</div>

<div class="px14"   >14px</div>

<div class="px16"   >16px</div>
実行結果
0px
2px
4px
6px
8px
10px
12px
14px
16px
割合(%)で指定

辺の長さに対する割合(%)で指定することもできる。

50%にすると、ぼほ楕円になる。（ボックスが正方形の場合は円）

CSS : パーセント指定
.pc0    { border-radius: 0%   ; }

.pc5    { border-radius: 5%   ; }

.pc10   { border-radius: 10%  ; }

.pc20   { border-radius: 20%  ; }

.pc30   { border-radius: 30%  ; }

.pc40   { border-radius: 40%  ; }

.pc50   { border-radius: 50%  ; }
HTML : 適用するHTML
<div class="pc0"  >0%</div>

<div class="pc5"  >5%</div>

<div class="pc10" >10%</div>

<div class="pc20" >20%</div>

<div class="pc30" >30%</div>

<div class="pc40" >40%</div>

<div class="pc50" >50%</div>
実行結果
0%
5%
10%
20%
30%
40%
50%

なお、引き数が１つの場合（＝４つの角を一括指定）、50%以上を指定しても意味が無いが、たとえば１つの角だけを指定するような場合（後述）は100%まで指定できる。

CSS : パーセント指定
.pc20   { border-top-left-radius: 20%  ; }

.pc40   { border-top-left-radius: 40%  ; }

.pc60   { border-top-left-radius: 60%  ; }

.pc80   { border-top-left-radius: 80%  ; }

.pc100  { border-top-left-radius: 100% ; }
HTML : 適用するHTML
<div class="pc20" >20%</div>

<div class="pc40" >40%</div>

<div class="pc60" >60%</div>

<div class="pc80" >80%</div>

<div class="pc100">100%</div>
実行結果
20%
40%
60%
80%
100%

引き数が２つ

引き数が２つの場合、下表のようにになる。

第１引数左上と右下
第２引数右上と左下
CSS : 引き数が２つ
.sample {

    border-radius:  2em  1em;

}
実行結果
sample

片方をゼロにした結果。

CSS : 片方をゼロ
.sample1    { border-radius:  2em 0     ; }

.sample2    { border-radius:  0   2em   ; }
HTML : 適用するHTML
<div class="sample1"  >sample1</div>

<div class="sample2"  >sample2</div>
実行結果
sample1
sample2

引き数が３つ

引き数が３つの場合、、下表のようにになる。

第１引数左上
第２引数右上と左下
第３引数右下
CSS : 引き数が３つ
.sample {

    border-radius:  2em 1em 0.5em;

}
実行結果
sample

２つをゼロにした結果。

CSS : 引き数が３つ
.sample1    { border-radius:  2em 0   0     ; }

.sample2    { border-radius:  0   2em 0     ; }

.sample3    { border-radius:  0   0   2em   ; }
HTML : 適用するHTML
<div class="sample1"  >sample1</div>

<div class="sample2"  >sample2</div>

<div class="sample3"  >sample3</div>
実行結果
sample1
sample2
sample3

引き数が４つ

引き数が４つの場合、、下表のようにになる。

第１引数左上
第２引数右上
第３引数右下
第４引数左下
CSS : 引き数が４つ
.sample {

    border-radius:  2em 1em 0.5em 0;

}
実行結果
sample

３つをゼロにした結果。

CSS : 引き数が４つ
.sample1    { border-radius:  2em 0   0    0   ; }

.sample2    { border-radius:  0   2em 0    0   ; }

.sample3    { border-radius:  0   0   2em  0   ; }

.sample4    { border-radius:  0   0   0    2em ; }
HTML : 適用するHTML
<div class="sample1"  >sample1</div>

<div class="sample2"  >sample2</div>

<div class="sample3"  >sample3</div>

<div class="sample4"  >sample4</div>
実行結果
sample1
sample2
sample3
sample4

border-top-left-radius : 左上

左上 の角を丸める

CSS : 左上
.sample {

    border-top-left-radius:  2em;

}
実行結果
sample

border-top-right-radius : 右上

右上 の角を丸める

CSS : 右上
.sample {

    border-top-right-radius:  2em;

}
実行結果
sample

border-bottom-right-radius : 右下

右下 の角を丸める

CSS : 右下
.sample {

    border-bottom-right-radius:  2em;

}
実行結果
sample

border-bottom-left-radius : 左下

左下 の角を丸める

CSS : 左下
.sample {

    border-bottom-left-radius:  2em;

}
実行結果
sample

楕円に丸める

border-radius の場合

曲率半径の指定を（横軸方向）/（縦軸方向）と指定することができる。

2em/1emの場合。

CSS : 2em / 1em
.sample {

    border-radius:  2em/1em;

}
実行結果
sample

1em/2emの場合。

CSS : 1em / 2em
.sample {

    border-radius:  1em/2em;

}
実行結果
sample

こういう風にもできる

CSS : 例
.sample {

    border-radius:  1em/2em 0;

}
実行結果
sample

border-○○-○○-radius の場合

横軸方向を第一引き数、縦軸方向を第二引き数に引き渡す。

CSS : border-top-left-radius
.sample {

    border-top-left-radius:  3em 1em;

}
実行結果
sample
CSS : border-top-right-radius
.sample {

    border-top-right-radius:  3em 1em;

}
実行結果
sample
CSS : border-bottom-right-radius
.sample {

    border-bottom-right-radius:  3em 1em;

}
実行結果
sample
CSS : border-bottom-left-radius
.sample {

    border-bottom-left-radius:  3em 1em;

}
実行結果
sample

Emmet : bdrs

記述Visual Studio Code
bdrsborder-radius: ;
bdtlrsborder-top-left-radius: ;
bdtrrsborder-top-right-radius: ;
bdbrrsborder-bottom-right-radius: ;
bdblrsborder-bottom-left-radius: ;