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

CSSの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～4つあります。

値	説明
数値 + 単位	指定した単位で設定します。
数値 + %	水平方向はボーダーボックスの幅、垂直方向はボーダーボックスの高さを参照します。
値を継承しない

設定する値は丸くなる部分の円の半径の長さです。
以下はMDNの border-radiusプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

角を楕円形にする場合

border-radius : 値1 / 値2;

2つの数値をスラッシュ区切りで指定すると角が楕円形になります。
値1が円の横の半径です。
値2が円の縦の半径です。

１．四角の角を丸くする(半径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;	左下を指定