border-radius
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
border-radius
は CSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。
試してみましょう
半径は要素に境界がなくても、 background
全体に適用されます。切り取りが行われる正確な位置は、 background-clip
プロパティで定義します。
border-radius
プロパティは border-collapse
が collapse
の table 要素には適用されません。
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit
のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 最初の半径の構文は 1 つから 4 つの値が許可されています */
/* 半径を全 4 角に設定 */
border-radius: 10px;
/* 左上と右下 | 右上と左下 */
border-radius: 10px 5%;
/* 左上 | 右上と左下 | 右下 */
border-radius: 2px 4px 2px;
/* 左上 | 右上 | 右下 | 左下 */
border-radius: 1px 0 3px 4px;
/* 2 番目の半径の構文は 1 つから 4 つの値が許可されています */
/* (最初の半径の値) / 半径 */
border-radius: 10px / 20px;
/* (最初の半径の値) / 左上と右下 | 右上と左下 */
border-radius: 10px 5% / 20px 30px;
/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;
/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;
border-radius
プロパティは次のように指定することができます。
- 1 ~ 4 つの
<length>
または<percentage>
の値。これは角の半径を 1 つ設定するために使用します。 - その後に任意で、 "/" と 1 ~ 4 つの
<length>
または<percentage>
の値。これは追加の半径を設定し、楕円形の角にすることができます。
値
半径 | 境界の四隅に使用される半径を記述する <length> または <percentage> です。値 1 つの構文でのみ使用されます。 |
|
左上と右下 | 要素ボックスの左上と右下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 2 つの構文でのみ使用されます。 |
|
右上と左下 | 要素ボックスの右上と左下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 2 つまたは 3 つの構文でのみ使用されます。 |
|
左上 | 要素ボックスの左上の隅の境界に使用される半径を記述する <length> または <percentage> です。値 3 つまたは 4 つの構文でのみ使用されます。 |
|
右上 | 要素ボックスの右上の隅の境界に使用される半径を記述する <length> または <percentage> です。値 4 つの構文でのみ使用されます。 |
|
右下 | 要素ボックスの右下の隅の境界に使用される半径を記述する <length> または <percentage> です。3 つまたは 4 つの値の構文でのみ使用されます。 |
|
左下 | 要素ボックスの左下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 4 つの構文でのみ使用されます。 |
<length>
-
円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
<percentage>
-
円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。
例:
border-radius: 1em/5em;
/* 次のものと同等 */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* 次のものと同等 */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
公式定義
初期値 | 一括指定の次の各プロパティとして |
---|---|
適用対象 | すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
例
ライブサンプル
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-radius |
ブラウザーの互換性
BCD tables only load in the browser