border-radius【境界線の角の丸み】
border-top-left-radius【境界線の角の丸み (左上)】
border-top-right-radius【境界線の角の丸み (右上)】
border-bottom-right-radius【境界線の角の丸み (右下)】
border-bottom-left-radius【境界線の角の丸み (左下)】

メモ 構文 例 外部リンク

メモ

  • 境界線の角の丸み用ショートハンドプロパティ  (border-radius【境界線の角の丸み】)
  • 下記のプロパティを設定
    • border-top-left-radius【境界線の角の丸み (左上)】
    • border-top-right-radius【境界線の角の丸み (右上)】
    • border-bottom-right-radius【境界線の角の丸み (右下)】
    • border-bottom-left-radius【境界線の角の丸み (左下)】
  • 参照

構文 (※記述方法)

プロパティ値備考
border-radius:      [ 《length【長さ】》 | 《percentage【パーセンテージ】》 ]{1,4}
[ / [ 《length【長さ】》 | 《percentage【パーセンテージ】》 ]{1,4} ]?

/ より前：水平方向の径
/ より後：垂直方向の径
/ 以降を省略：両方の径
(1) 1個指定 (すべての角)
(2) 2個指定 (左上と右下の角・右上と左下の角)
(3) 3個指定 (左上の角・右上と左下の角・右下の角)
(4) 4個指定 (左上の角・右上の角・右下の角・左下の角)
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius: 		[ 《length【長さ】》 | 《percentage【パーセンテージ】》 ]{1,2}
(1) 1個指定 (角の径)
(2) 2個指定 (水平方向の径・垂直方向の径) 		左上の角
右上の角
右下の角
左下の角

例

<style>
.example { border:5px blue solid }
</style>
<span class="example" style="border-radius:10px;">border-radius: 10px</span>
<span class="example" style="border-radius:10px 20px;">border-radius: 10px 20px</span>
<span class="example" style="border-radius:10px 20px 30px;">border-radius: 10px 20px 30px</span>
<span class="example" style="border-radius:10px 20px 30px 40px;">border-radius: 10px 20px 30px 40px</span>
<span class="example" style="border-radius:50%;">border-radius: 50%</span>

border-radius: 10px border-radius: 10px 20px border-radius: 10px 20px 30px border-radius: 10px 20px 30px 40px border-radius: 50%