rounded

bootstrap5.css

bootstrap5.css
.rounded {
  border-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-0 {
  border-radius: 0 !important;
}
bootstrap5.css
.rounded-1 {
  border-radius: 0.2rem !important;
}
bootstrap5.css
.rounded-2 {
  border-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-3 {
  border-radius: 0.3rem !important;
}
bootstrap5.css
.rounded-circle {
  border-radius: 50% !important;
}
bootstrap5.css
.rounded-pill {
  border-radius: 50rem !important;
}
bootstrap5.css
.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-end {
  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-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
}

html bootstrap5 Sample

ピル型のバッジを作成する:badge-pill


Primary Secondary Success Danger Warning Info Light Dark
  <!-- ビル型は、丸みを帯びた形状のデザインのこと -->
  <span class="badge rounded-pill bg-primary">Primary</span>
  <span class="badge rounded-pill bg-secondary">Secondary</span>
  <span class="badge rounded-pill bg-success">Success</span>
  <span class="badge rounded-pill bg-danger">Danger</span>
  <span class="badge rounded-pill bg-warning">Warning</span>
  <span class="badge rounded-pill bg-info">Info</span>
  <span class="badge rounded-pill bg-light text-dark">Light</span>
  <span class="badge rounded-pill bg-dark">Dark</span>

svg図とキャプション:figure-caption


svg image 400x300
svgのサンプルimageの例
  <figure class="figure">
    <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300"
      xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300"
      preserveAspectRatio="xMidYMid slice" focusable="false">
      <title>svg image</title>
      <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text>
    </svg>
    <figcaption class="figure-caption">svgのサンプルimageの例</figcaption>
  </figure>

影:Shadows


影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)
  <!-- smと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-end
rounded-bottom
rounded-start
rounded-circle
rounded-0
  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <!-- 角丸 -->
  <div class="rounded bg-warning">rounded</div>
  <div class="rounded-top bg-warning">rounded-top</div>
  <div class="rounded-end bg-warning">rounded-end</div>
  <div class="rounded-bottom bg-warning">rounded-bottom</div>
  <div class="rounded-start bg-warning">rounded-start</div>
  <!-- サークル -->
  <div class="rounded-circle bg-warning">rounded-circle</div>
  <div class="rounded-0 bg-warning">rounded-0</div>

影と角丸の両方適用:shadowとrounded


小さめの影
標準の影
大きめの影
  <div class="shadow-sm p-3 mb-5 bg-white rounded">小さめの影</div>
  <div class="shadow p-3 mb-5 bg-white rounded-0">標準の影</div>
  <div class="shadow-lg p-3 mb-5 bg-white rounded">大きめの影</div>