border-radius
border-radius
は CSS の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このプロパティ border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
, border-bottom-left-radius
の4つのプロパティの一括指定です。
半径は要素に境界がなくても、 background
全体に適用されます。クリッピングが行われる正確な位置は、 background-clip
プロパティで定義します。
border-radius
プロパティは border-collapse
が collapse
の table 要素には適用されません。
メモ: 他の一括指定プロパティと同様、個別のサブプロパティは
border-radius:0 0 inherit inherit
のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。構文
/* 最初の半径の構文は1つから4つの値が許可されています */
/* 半径を全4角に設定 */
border-radius: 10px;
/* 左上と右下 | 右上と左下 */
border-radius: 10px 5%;
/* 左上 | 右上と左下 | 右下 */
border-radius: 2px 4px 2px;
/* 左上 | 右上 | 右下 | 左下 */
border-radius: 1px 0 3px 4px;
/* 2番目の半径の構文は1つから4つの値が許可されています */
/* (最初の半径の値) / radius */
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: unset;
border-radius
プロパティは次のように指定することができます。
- 1つ、2つ、3つ、4つの
<length>
又は<percentage>
の値。これは角の半径を1つ設定するために使用します。 - その後に任意で、 "/" と1つ、2つ、3つ、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;
/* ... is equivalent to: */
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;
/* ... is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
形式文法
<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?ここで
<length-percentage> = <length> | <percentage>
例
border: solid 10px; /* 境界が「D」のように描画される */ border-radius: 10px 40px 40px 10px;
border: groove 1em red; border-radius: 2em;
background: gold; border: ridge gold; border-radius: 13em/3em;
border: none; border-radius: 40px 10px;
border: none; border-radius: 50%;
border: dotted; border-width: 10px 4px; border-radius: 10px 40px;
border: dashed; border-width: 2px 4px; border-radius: 40px;
ライブサンプル
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-radius の定義 |
勧告候補 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして |
---|---|
適用対象 | すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- border-radius 関連 CSS プロパティ:
border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius