border-radius プロパティ

プロパティ border-radius は境界線と背景の角を丸めます。 プロパティの値には任意のサイズ単位を使用できます。 デフォルト値: 0。 これは次のプロパティの一括指定です: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius。

構文

cssセレクタ {
  border-radius: 値;
}

値の数

プロパティは空白で区切った 1, 2, 3, 4 個の値を取ることができます:

楕円形の角丸

スラッシュで区切った2つの値で楕円形の角丸を設定します。 スラッシュの前の値は水平方向の丸みを、 スラッシュの後の値は垂直方向の丸みを指定します:

cssセレクタ {
  border-radius: 水平方向 / 垂直方向;
}

複数の角に対して角丸を指定する場合、 スラッシュの前にはすべての水平方向の丸みを、 スラッシュの後にはすべての垂直方向の丸みを列挙します。

例

すべての角に 10px の角丸を設定します:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

例

点線の境界線での角丸がどのように見えるか確認します:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

例

一方の対角線の角に 10px の角丸を、 もう一方の対角線の角に 40px の角丸を設定します:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

例

左上の角に 10px の角丸、 右下の角に 30px の角丸、 もう一方の対角線の角に 50px の角丸を設定します:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

例

各角ごとに異なる角丸を設定します:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

例

楕円形の角丸を作成します。 水平方向の丸みに 20px、 垂直方向の丸みに 40px を設定します:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

例

次に、すべての角に対して個別に異なる楕円形の角丸を設定します:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

例

正方形のブロックに対して、辺の長さの半分に等しい角丸を設定すると、円形になります:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

例

正方形の辺の長さよりも大きい角丸を設定しても、やはり円形になります:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

例

border-radius を 50% に設定しても円形を得ることができます（利点は、正方形のサイズを変更する際に角丸の値を変更する必要がないことです）:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

例

長方形に対してパーセントで border-radius を設定すると、楕円形の角丸になります。 幅が 400px、高さが 200px、border-radius が 10% の場合、これは 40px/20px と記述するのと同じです:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

例

長方形に対して border-radius を 50% に設定すると、楕円形になります:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

例

プロパティ border-radius は境界線の角だけでなく、背景の角も丸めます:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

関連項目