CSS: CSSボーダーとボーダーラディウス
最終更新：2026-10-13
ボーダーとボーダーラディウスは、要素に「形」を与えるための重要なプロパティです。ボーダーは要素にアウトライン線を追加し、ボーダーラディウスは鋭い角を柔らかくします。
ボーダープロパティ早見表
| プロパティ | よく使う値 | 用途 |
|---|---|---|
border-width |
1px、2px、medium、thick |
ボーダーの幅 |
border-style |
solid、dashed、dotted、double、none |
ボーダーのスタイル |
border-color |
#333、red、transparent |
ボーダーの色 |
border |
2px solid #333 |
省略形（幅+スタイル+色） |
border-top/right/bottom/left |
1px dashed red |
個別の側のボーダー |
border-radius |
4px、50%、10px 20px |
角の半径 |
border-collapse |
collapse、separate |
テーブルのボーダー折りたたみモード |
1. ボーダープロパティ
(1) ボーダーの3つの要素
すべてのボーダーには3つの要素があります：幅、スタイル、色です。
▶ サンプル
▶ 試してみよう(2) ボーダーのスタイル値
▶ サンプル
▶ 試してみよう2. ボーダーラディウス
border-radiusは要素の角を丸めます：
▶ サンプル
▶ 試してみよう(1) よく使うケース
丸いアバター：
HTML
<style>
.avatar {
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
<div class="avatar">アバター</div>
カプセルボタン：
HTML
<style>
.pill {
border-radius: 999px;
padding: 8px 24px;
background: #3498db;
color: white;
}
</style>
<div class="pill">カプセルボタン</div>
❓ よくある質問
Q border-radius: 50%と999pxの違いは何ですか？
A 50%は要素の寸法に相対的です——正方形は円形に、長方形は楕円形になります。999pxは大きな固定値で、寸法の半分を超える限り、すべての角が完全に丸い「カプセル」形状になります。正方形では同じ効果ですが、長方形では異なります。
Q outlineとborderは一緒に使えますか？
A はい。outlineはスペースを占有しません（要素のサイズに影響しない）、borderは占有します。outlineは
:focus状態でキーボードユーザーにフォーカスインジケータを提供するためによく使用されます。outline-offsetでoutlineと要素境界の距離を制御できます。Q 個別の角に半径を設定するにはどうすればいいですか？
A 個別の角には
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radiusを使用します。または省略形：border-radius: 左上 右上 右下 左下;。📖 まとめ
- ボーダーとボーダーラディウスは、ページ要素に「形」を与えるための基本ツールです
borderは要素のアウトラインを制御し、border-radiusは鋭い角を柔らかくします- 組み合わせ（
border-radius: 50%で丸いアバター、border: noneでデフォルトを削除など）をマスターすることは、実際の開発で非常に実用的です
📝 練習問題
- ボーダーとボーダーラディウスを使用して「名刺」のようなカードを作成してください——ボーダー、角丸、パディング付き。
border-radius: 50%を使用して円形のアバターフレームを作成してください。- 異なるボーダーの組み合わせを使用して、「下線付き」（下ボーダーのみ）のメニューアイテムを作成してください。
dashedとdottedのボーダースタイルを試し、視覚的な違いを確認してください。
