外枠:border

ボーダーを追加する:!important


border border-top border-end border-bottom border-start

  <!-- 全辺ボーダー -->
  <span class="border">border</span>
  <!-- 上ボーダー -->
  <span class="border-top">border-top</span>
  <span class="border-end">border-end</span>
  <span class="border-bottom">border-bottom</span>
  <span class="border-start">border-start</span>

ボーダー色を設定する:border-*


border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white

  <span class="border border-primary">border-primary</span>
  <span class="border border-secondary">border-secondary</span>
  <span class="border border-success">border-success</span>
  <span class="border border-danger">border-danger</span>
  <span class="border border-warning">border-warning</span>
  <span class="border border-info">border-info</span>
  <span class="border border-light">border-light</span>
  <span class="border border-dark">border-dark</span>
  <span class="border border-white">border-white</span>

ボーダーを削除する:border-0


border-0 border-top-0 border-end-0 border-bottom-0 border-start-0

  <!-- 全ボーダー削除 -->
  <span class="border border-0">border-0</span>
  <span class="border border-top-0">border-top-0</span>
  <span class="border border-end-0">border-end-0</span>
  <span class="border border-bottom-0">border-bottom-0</span>
  <span class="border border-start-0">border-start-0</span>

ボーダー太さ:border-1


border-1 border-2 border-3 border-4 border-5

  <span class="border border-1">border-1</span>
  <span class="border border-2">border-2</span>
  <span class="border border-3">border-3</span>
  <span class="border border-4">border-4</span>
  <span class="border border-5">border-5</span>