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

1.四角の角を丸くする(半径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>

 

2.四角の角を丸くする(半径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>

 

3.四角の角を丸くする(半径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>

 

4.四角の角を丸くする(半径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>

 

5.角を楕円形にする(横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>

 

6.角を楕円形にする(横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;
左下を指定

関連の記事

CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル

△上に戻る