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 つの半径を設定すると楕円の角になります。

試してみましょう

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

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

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

値

水色の長方形に薄いグレーの境界線があります。左上と右下の 2 つの角は丸めてあります。

<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-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
適用対象	すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。
継承	なし
パーセント値	境界ボックスの対応する寸法に対する相対値
計算値	一括指定の次の各プロパティとして `border-bottom-left-radius`: ２つの絶対的な `<length>` または `<percentage>` 値 `border-bottom-right-radius`: ２つの絶対的な `<length>` または `<percentage>` 値 `border-top-left-radius`: ２つの絶対的な `<length>` または `<percentage>` 値 `border-top-right-radius`: ２つの絶対的な `<length>` または `<percentage>` 値
アニメーションの種類	一括指定の次の各プロパティとして `border-top-left-radius`: length またはパーセント値, calc(); `border-top-right-radius`: length またはパーセント値, calc(); `border-bottom-right-radius`: length またはパーセント値, calc(); `border-bottom-left-radius`: length またはパーセント値, calc();

形式文法

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

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

例

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
</pre>

<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
</pre>

<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
</pre>

<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
</pre>

<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
</pre>

<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

ライブサンプル

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

仕様書

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

半径		境界の四隅に使用される半径を記述する `<length>` または `<percentage>` です。値 1 つの構文でのみ使用されます。
左上と右下		要素ボックスの左上と右下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 2 つの構文でのみ使用されます。
右上と左下		要素ボックスの右上と左下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 2 つまたは 3 つの構文でのみ使用されます。
左上		要素ボックスの左上の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 3 つまたは 4 つの構文でのみ使用されます。
右上		要素ボックスの右上の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 4 つの構文でのみ使用されます。
右下		要素ボックスの右下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。3 つまたは 4 つの値の構文でのみ使用されます。
左下		要素ボックスの左下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 4 つの構文でのみ使用されます。