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【境界線】・border-○【境界線 関連】
構文 (※記述方法)
プロパティ | 値 | 備考 |
---|---|---|
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個指定 (水平方向の径・垂直方向の径) | 左上の角 右上の角 右下の角 左下の角 |
例
border-radius: 10px border-radius: 10px 20px border-radius: 10px 20px 30px border-radius: 10px 20px 30px 40px border-radius: 50%