| 属性名 |
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
|
|---|---|
| 値 | [<length> | <percentage>]{1,2} |
| 初期値 | 0 |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 9 | 1(-moz) 4 | 1(-webkit) 5 | 11.5 | 3.1(-webkit) 5.1 |
角の丸いボーダーラインの左上、右上、右下、左下の半径を個別に指定します。詳細は border-radius も参照してください。
| 値 | 説明 |
|---|---|
| <length> | 角の丸い部分の半径を長さで指定します。 |
| <percentage> | 角の丸い部分の半径をパーセントで指定します。 |
値をひとつした場合、角の丸の半径と見なされます。値をふたつ指定した場合、丸の代わりに楕円が適用され、最初の数値が楕円の横半径、後の数字が楕円の縦半径を示します。
border-top-left-radius: 10px; /* 左上:10×10pxの円 */ border-top-left-radius: 10px 20px; /* 左上:10×20pxの楕円 */
.test {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
border: 6px solid red;
background-color: #cc9999;
height: 32px;
width: 120px;
}
<div class="test"></div>