rounded

bootstrap5.css

.rounded-sm {
  border-radius: 0.2rem !important;
}

bootstrap5.css

.rounded {
  border-radius: 0.25rem !important;
}

bootstrap5.css

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

bootstrap5.css

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

bootstrap5.css

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

bootstrap5.css

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

bootstrap5.css

.rounded-lg {
  border-radius: 0.3rem !important;
}

bootstrap5.css

.rounded-circle {
  border-radius: 50% !important;
}

bootstrap5.css

.rounded-pill {
  border-radius: 50rem !important;
}

bootstrap5.css

.rounded-0 {
  border-radius: 0 !important;
}

html bootstrap5 Sample

影：Shadows

影なし（shadow-none）

小さめの影（shadow-sm）

標準の影（shadow）

大きめの影（shadow-lg）

  <div class="shadow-none p-3 mb-5 bg-light rounded">影なし（shadow-none）</div>
  <div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影（shadow-sm）</div>
  <div class="shadow p-3 mb-5 bg-light rounded">標準の影（shadow）</div>
  <div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影（shadow-lg）</div>

角丸：rounded

rounded rounded-top rounded-right rounded-bottom rounded-left rounded-circle rounded-0

  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <span class="rounded bg-warning">rounded</span>
  <span class="rounded-top bg-warning">rounded-top</span>
  <span class="rounded-right bg-warning">rounded-right</span>
  <span class="rounded-bottom bg-warning">rounded-bottom</span>
  <span class="rounded-left bg-warning">rounded-left</span>
  <!-- サークル -->
  <span class="rounded-circle bg-warning">rounded-circle</span>
  <span class="rounded-0 bg-warning">rounded-0</span>