EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSボーダーとボーダーラディウス

ボーダーとボーダーラディウスは、要素に「形」を与えるための重要なプロパティです。ボーダーは要素にアウトライン線を追加し、ボーダーラディウスは鋭い角を柔らかくします。

ボーダープロパティ早見表

プロパティ よく使う値 用途
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 テーブルのボーダー折りたたみモード

ボーダープロパティ

ボーダーの3つの要素

すべてのボーダーには3つの要素があります：幅、スタイル、色です。

サンプル

HTML 
<style>
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* 省略形 */
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">ボックスを包む2pxの実線ボーダー</div>
▶ 試してみよう

ボーダーのスタイル値

サンプル

HTML 
<style>
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
</style>
<div class="solid">実線ボーダー</div>
<div class="dotted">点線ボーダー</div>
<div class="dashed">破線ボーダー</div>
<div class="double">二重線ボーダー</div>
▶ 試してみよう

ボーダーラディウス

border-radiusは要素の角を丸めます：

サンプル

HTML 
<style>
.rounded {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 16px;
  background: #f5f5f5;
}
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #3498db;
}
</style>
<div class="rounded">角丸</div>
<div class="circle">円形</div>
▶ 試してみよう

よく使うケース

丸いアバター：

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: 左上 右上 右下 左下;`。

📖 まとめ

📝 演習

  1. ボーダーとボーダーラディウスを使用して「名刺」のようなカードを作成してください——ボーダー、角丸、パディング付き。
  2. border-radius: 50%を使用して円形のアバターフレームを作成してください。
  3. 異なるボーダーの組み合わせを使用して、「下線付き」（下ボーダーのみ）のメニューアイテムを作成してください。
  4. dashedとdottedのボーダースタイルを試し、視覚的な違いを確認してください。
100%