CSSborder-radius プロパティは、要素の境界の外側の角を丸めることができます。1つの半径を指定すると円の角になり、2つの半径を指定すると楕円の角になります。

このプロパティ border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius の4つのプロパティの一括指定です。

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

border-radius プロパティは border-collapsecollapse の 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 5% / 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> の値。これは追加の半径を設定し、楕円形の角にすることができます。

半径 all-corner.png 境界の四隅に使用される半径を記述する <length> 又は <percentage> です。1つの値の構文のみで使用されます。
左上と右下 top-left-bottom-right.png 要素ボックスの左上と右下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。2つの値の構文のみで使用されます。
右上と左下 top-right-bottom-left.png 要素ボックスの右上と左下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。2つ又は3つの値の構文のみで使用されます。
左上 top-left.png 要素ボックスの左上の隅の境界に使用される半径を記述する <length> 又は <percentage> です。3つ又は4つの値の構文のみで使用されます。
右上 top-right.png 要素ボックスの右上の隅の境界に使用される半径を記述する <length> 又は <percentage> です。4つの値の構文のみで使用されます。
右下 bottom-rigth.png 要素ボックスの右下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。3つ又は4つの値の構文のみで使用されます。
左下 bottom-left.png 要素ボックスの左下の隅の境界に使用される半径を記述する <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} ]?

where
<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 の定義
勧告候補 初回定義

初期値以下の一括指定の各プロパティとして
適用対象all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.。 ::first-letter にも適用されます。
継承なし
パーセンテージrefer to the corresponding dimension of the border box
メディアvisual
計算値以下の一括指定の各プロパティとして
アニメーションの種類以下の一括指定の各プロパティとして
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

41

1 -webkit-

12

12 -webkit-

42 3

1 — 12 -moz-

910.54

51

3 -webkit-

Elliptical borders あり5123.5 あり あり あり6
4 values for 4 corners412 あり あり あり5
Percentages あり71248 あり11.595.17
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 -webkit- ?

あり

あり -webkit-

あり2 あり ?
Elliptical borders ? ? あり あり なし ? ?
4 values for 4 corners ? ? あり あり なし ? ?
Percentages あり7 ? あり あり なし あり7 ?

1. Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

2. Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.

3. To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.

4. In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.

5. Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.

6. Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.

7. <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).

8. <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.

9. The implementation of <percentage> values was buggy in Opera prior to 11.50.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Simplexible, Prinz_Rana, Sebastianz, ethertank, sosleepy, myakura
最終更新者: mfuji09,