Bootstrap 5 Border Radius Classes: Create Rounded Corner Elements with Ease

In Bootstrap 5, border radius classes are used to apply rounded corners to elements, such as buttons, divs, images, and other HTML elements. These classes allow developers to easily create visually appealing rounded border elements without having to write custom CSS.

Bootstrap 5 provides a range of border radius classes that can be applied to elements. The general format for a border radius class in Bootstrap 5 is border-radius-{value}, where {value} can be one of the predefined values: sm (small), md (medium), lg (large), or xl (extra large)

By using the border radius classes in Bootstrap 5, you can easily customize the appearance of your elements and create rounded corner elements that align with your design requirements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/base.css">
  <style>
.col-auto{
  height: 100px;
      width: 100px;
      color:white;
      text-align: center;
}

.pill{
  width: 200px !important;
}
  </style>
</head>
<body>

  <div class="container">
    <h2>Border-Radius in Bootstrap</h2><hr>

    <div class="row">
      <div class="col-auto bg-primary m-2 rounded">All Side</div>
      <div class="col-auto bg-primary m-2 rounded-top">Top</div>
      <div class="col-auto bg-primary m-2 rounded-end">End</div>
      <div class="col-auto bg-primary m-2 rounded-bottom">Bottom</div>
      <div class="col-auto bg-primary m-2 rounded-start">Start</div>
      <div class="col-auto bg-primary m-2  rounded-circle">Circle</div>
      <div class="col-auto bg-primary m-2 rounded-pill pill">Pill</div>
    </div>
    <hr>
    <div class="row">
      <div class="col-auto bg-primary m-2 rounded-0">0</div>
      <div class="col-auto bg-secondary m-2 rounded-1">1</div>
      <div class="col-auto bg-secondary m-2 rounded-2">2</div>
      <div class="col-auto bg-success m-2 rounded-3">3</div>
      <div class="col-auto bg-warning m-2 rounded-4">4</div>
      <div class="col-auto bg-primary m-2 rounded-5">5</div>
    </div>
    
    <img src="https://via.placeholder.com/200/000000?text=tutorjoes.in" class="rounded border border-5 border-danger">
    
  </div>
 
      
 
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Preview

Bootstrap 5 Border Radius Classes: Create Rounded Corner Elements with Ease

Example

Bootstrap 5.3X Tutorial

components