CSS プロパティ border-radius

CSSプロパティborder-radius：丸みを帯びたボーダーを作るためのツール

CSSプロパティborder-radius：丸みを帯びたボーダーを作るためのツール

border-radius プロパティは、CSSで丸みを帯びたボーダーを作成するための重要なプロパティです。 これにより、要素の4つの角の丸みを制御し、単調な直角ボーダーに別れを告げ、さまざまな丸みを帯びた効果を簡単に実現できます。

目次

  1. border-radius の基本的な構文と値
  2. 長さ値とパーセンテージ値の使用
  3. 楕円形の丸みの作成
  4. 適用シーンと実際のケース
  5. ブラウザの互換性
  6. よくある質問

1. border-radius の基本的な構文と値

border-radius プロパティは、簡略表記と個別プロパティの2つの方法で使用できます。

簡略プロパティ

border-radius プロパティの簡略形式では、1つから4つの値を使用して、異なる角の半径を設定できます。

値の数 説明
1 すべての角に同じ値が適用されます。
2 最初の値は左上と右下の角に、2番目の値は右上と左下の角に適用されます。
3 最初の値は左上に、2番目の値は右上と左下に、3番目の値は右下に適用されます。
4 値は、左上、右上、右下、左下の順に適用されます。 

<style>
.one-value {
  border-radius: 10px;
}

.two-value {
  border-radius: 10px 20px;
}

.three-value {
  border-radius: 10px 20px 30px;
}

.four-value {
  border-radius: 10px 20px 30px 40px;
}
</style>

<div class="one-value">1つの値</div>
<div class="two-value">2つの値</div>
<div class="three-value">3つの値</div>
<div class="four-value">4つの値</div>

個別プロパティ

4つの個別のプロパティ border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius を使用して、各角の半径を個別に設定することもできます。 


<style>
.independent-radius {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}
</style>

<div class="independent-radius">個別プロパティ</div>

2. 長さ値とパーセンテージ値の使用

border-radius プロパティには、px、em、remなどの長さの単位を使用できます。 


<style>
.px-radius {
  border-radius: 10px;
}

.em-radius {
  border-radius: 1em;
}
</style>

<div class="px-radius">px</div>
<div class="em-radius">em</div>

パーセンテージ値を使用して、ボーダーボックスの幅または高さに対する相対的な半径を設定することもできます。 


<style>
.percentage-radius {
  border-radius: 50%; /* ボーダーボックスの幅/高さの50% */
}
</style>

<div class="percentage-radius">パーセンテージ</div>

3. 楕円形の丸みの作成

border-radius プロパティに2つの値を指定することで、楕円形の丸みを作成できます。

  • 最初の値は水平方向の半径を表します。
  • 2番目の値は垂直方向の半径を表します。

<style>
.horizontal-ellipse {
  border-radius: 50px 20px; /* 水平方向に長い楕円 */
}

.vertical-ellipse {
  border-radius: 20px 50px; /* 垂直方向に長い楕円 */
}
</style>

<div class="horizontal-ellipse">水平方向の楕円</div>
<div class="vertical-ellipse">垂直方向の楕円</div>

4. 適用シーンと実際のケース

border-radius プロパティには、次のような一般的な適用シーンがあります。

  • 円形またはカプセル型のボタンの作成
  • 画像への丸み効果の追加
  • カードレイアウトの装飾
  • 不規則な図形のデザイン

<style>
.round-button {
  border-radius: 50%;
  padding: 10px 20px;
}

.rounded-image {
  border-radius: 10px;
}

.card {
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>

<button class="round-button">円形ボタン</button>
<img src="image.jpg" alt="丸みを帯びた画像" class="rounded-image">
<div class="card">カードレイアウト</div>

5. ブラウザの互換性

border-radius プロパティは、すべての主要なブラウザで広くサポートされています。ただし、古いバージョンのブラウザでは、ベンダープレフィックスが必要になる場合があります。詳細については、Can I use を参照してください。

よくある質問

Q1: border-radius を使用して、要素の一部の角だけに丸みを付けることはできますか？
A1: はい、できます。個別のプロパティ (border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius) を使用するか、簡略プロパティで必要な角にのみ値を指定することで、特定の角にのみ丸みを付けることができます。
Q2: border-radius の値に負の値を指定することはできますか？
A2: いいえ、できません。border-radius の値は、正の値または0でなければなりません。負の値を指定すると、無視されます。
Q3: border-radius と border-collapse プロパティの間に競合はありますか？
A3: はい、border-collapse プロパティを collapse に設定すると、テーブルセルの間のボーダーがマージされ、border-radius の効果が失われる可能性があります。テーブルセルに丸みを帯びたボーダーを設定する場合は、border-collapse を separate に設定する必要があります。