border-radius

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

このプロパティ 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 要素には適用されません。

構文

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

値

半径		境界の四隅に使用される半径を記述する <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} ]?
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;

ライブサンプル

• 例 1 : http://jsfiddle.net/Tripad/qnGKj/2/
• 例 2 : http://jsfiddle.net/Tripad/qnGKj/3/
• 例 3 : http://jsfiddle.net/Tripad/qnGKj/4/
• 例 4 : http://jsfiddle.net/Tripad/qnGKj/5/
• 例 5 : http://jsfiddle.net/Tripad/qnGKj/6/

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• border-radius 関連 CSS プロパティ: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius