CSS border-radius 四角の角を丸くするサンプル

border-radiusのサンプルです。

目次	border-radius
	四角の角を丸くする(半径10px) / (半径30px) / (半径10%) / (半径30%)
	角を楕円形にする(横10px、縦30px) / (横30px、縦10px)
	円を作成する / 角を個別に指定する

border-radius

書き方	border-radius : 値(4つの角)
	border-radius : 値(左上と右下)　値(右上と左下)
	border-radius : 値(左上)　値(右上と左下)　値(右下)
	border-radius : 値(左上)　値(右上)　値(右下)　値(左下) ※時計回りです
値	数値 + 単位指定した単位で設定します。
	数値 + % 水平方向はボーダーボックスの幅、垂直方向はボーダーボックスの高さを参照します。
使用例	設定する値は丸くなる部分の円の半径の長さです。
	角を楕円形にする場合は、border-radius : 値1 / 値2のように 2つの数値をスラッシュ区切りで指定します。値1が円の横の半径で、値2が円の縦の半径です。
初期値	0
継承	なし
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

１．四角の角を丸くする(半径10px)

border-radius:10px

<style>
  .test1 {
    border-radius: 10px;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">border-radius:10px</div>

２．四角の角を丸くする(半径30px)

border-radius:30px

<style>
  .test2 {
    border-radius: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test2">border-radius:30px</div>

３．四角の角を丸くする(半径10%)

border-radius:10%

<style>
  .test3 {
    border-radius: 10%;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test3">border-radius:10%</div>

４．四角の角を丸くする(半径30%)

border-radius:30%

<style>
  .test4 {
    border-radius: 30%;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test4">border-radius:30%</div>

５．角を楕円形にする(横10px、縦30px)

border-radius:10px/30px

<style>
  .test5 {
    border-radius: 10px/30px;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test5">border-radius:10px/30px</div>

６．角を楕円形にする(横30px、縦10px)

border-radius:30px/10px

<style>
  .test6 {
    border-radius: 30px/10px;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<div class="test6">border-radius:30px/10px</div>

円を作成する

<style>
  .test7 {
    border-radius: 50%;
    background-color: #1e90ff;
    width: 30px;
    height: 30px;
  }
</style>
<div class="test7"></div>

widthとheightの値を同じにして、border-radiusを50%にすると丸が作成できます。

角を個別に指定する

角を個別に指定することもできます。

指定方法	意味
border-top-left-radius 例：border-top-left-radius:10px;	左上を指定
border-top-right-radius 例：border-top-right-radius:10px;	右上を指定
border-bottom-right-radius 例：border-bottom-right-radius:10px;	右下を指定
border-bottom-left-radius 例：border-bottom-left-radius:10px;	左下を指定