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-radiusCSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。

試してみましょう

半径は要素に境界がなくても、 background 全体に適用されます。切り取りが行われる正確な位置は、 background-clip プロパティで定義します。

border-radius プロパティは border-collapsecollapse の table 要素には適用されません。

メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

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> の値。これは追加の半径を設定し、楕円形の角にすることができます。

半径 水色の長方形に薄いグレーの境界線があります。4 つの角はすべて丸めてあります。 境界の四隅に使用される半径を記述する <length> または <percentage> です。値 1 つの構文でのみ使用されます。
左上と右下 水色の長方形に薄いグレーの境界線があります。左上と右下の 2 つの角は丸めてあります。 要素ボックスの左上と右下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 2 つの構文でのみ使用されます。
右上と左下 水色の長方形に薄いグレーの境界線があります。右上と左下の 2 つの角は丸めてあります。 要素ボックスの右上と左下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 2 つまたは 3 つの構文でのみ使用されます。
左上 水色の長方形に薄いグレーの境界線があります。左上の角は丸めてあります。 要素ボックスの左上の隅の境界に使用される半径を記述する <length> または <percentage> です。値 3 つまたは 4 つの構文でのみ使用されます。
右上 水色の長方形に薄いグレーの境界線があります。右上の角は丸めてあります。 要素ボックスの右上の隅の境界に使用される半径を記述する <length> または <percentage> です。値 4 つの構文でのみ使用されます。
右下 水色の長方形に薄いグレーの境界線があります。右下の角は丸めてあります。 要素ボックスの右下の隅の境界に使用される半径を記述する <length> または <percentage> です。3 つまたは 4 つの値の構文でのみ使用されます。
左下 水色の長方形に薄いグレーの境界線があります。左下の角は丸めてあります。 要素ボックスの左下の隅の境界に使用される半径を記述する <length> または <percentage> です。値 4 つの構文でのみ使用されます。
<length>

円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。

<percentage>

円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。

例:

css
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;
css
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-collapsecollapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。
継承なし
パーセント値境界ボックスの対応する寸法に対する相対値
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

border-radius = 
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

<length-percentage> =
<length> |
<percentage>

ライブサンプル

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# border-radius

ブラウザーの互換性

BCD tables only load in the browser

関連情報