| 属性名 | border-radius |
|---|---|
| 値 | <radius> [ / <radius> ]? |
| 値の詳細 | <radius> = [<length> | <percentage>]{1,4} |
| 初期値 | 個々の属性を参照 |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 個々の属性を参照 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 9 | 1(-moz) 4 | 1(-webkit) 5 | 11.5 | 3.1(-webkit) 5.1 |
角の丸いボーダーラインを描画します。
| 値 | 説明 |
|---|---|
| <length> | 角の丸い部分の半径を長さで指定します。 |
| <percentage> | 角の丸い部分の半径をパーセントで指定します。 |
値を 4つ指定した場合、それぞれは、左上、右上、右下、左下に適用されます。左下を省略すると右上と同じ値になります。右下を省略すると左上の同じ値になります。右上を省略すると左上と同じ値になります。
/* 左上=右上=右下=左下=10px */ border-radius: 10px; /* 左上=右下=10px、右上=左下=20px */ border-radius: 10px 20px; /* /* 左上=10px、右上=左下=20px、右下=30px */ border-radius: 10px 20px 30px; /* 左上=10px、右上=20px、右下=30px、左下=40px */ border-radius: 10px 20px 30px 40px;
スラッシュ(/)で区切った値を指定すると、丸の代わりに楕円が適用され、/ よりも前の部分が楕円の横半径、/ よりも後の部分が楕円の縦半径を示します。
/* 左上:1×5px、右上:1×5px、右下:1×5px、左下:1×5px */ border-radius: 1px / 5px; /* 左上:1×5px、右上:2×6px、右下:3×7px、左下:4×8px */ border-radius: 1px 2px 3px 4px / 5px 6px 7px 8px;
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 6px solid red;
background-color: #cc9999;
height: 32px;
width: 120px;
}
<div class="test"></div>