How to create a rounded table in Bootstrap 5?

Last Updated : 22 Nov, 2023

Bootstrap 5 provides various classes that can be used for styling the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create a rounded table in Bootstrap 5.

Here we use two different approaches rounded-3 and rounded-pill. these are two different classes in Bootstrap for giving styles to the table.

Table of Content

Using rounded-3
Using Rounded pill

Approach 1: Using rounded-*

Using rounded-*: We can achieve the rounded table using class rounded or inline CSS.
This class is used to make all corners round of an element.
We have Sizes range from 0 to 3, and can be configured by modifying the utilities API.

Syntax:

<table class="table table-sm table-bordered bg-success text-light rounded-3">

Example: In this example we create a rounded table in Bootstrap 5 using rounded class

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
</head>
 
<body class="m-3">
    <center>
        <h2 class="text-success">
            GeeksforGeeks
        </h2>
        <h2>How to create a rounded table in Bootstrap 5? </h2>
    </center>
    <table class="table table-sm table-bordered 
                  bg-success text-light rounded-3">
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>$29</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>$25</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>JS- Basics</td>
                <td>$35</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>

Output

z142

Approach 2: Using Rounded-pill

We can make a rounded table using rounded-pill class in Bootstrap-5 which has a border radius of 50%.
Give different styling by using different Bootstrap classes.

Syntax:

 <table class="table table-sm table-bordered bg-danger text-light rounded-pill"  >

Example: In this example we will see how to create a rounded table in Bootstrap 5

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous">
</head>
 
<body class="m-3">
    <center>
        <h2 class="text-success">
            GeeksforGeeks
        </h2>
        <h2>How to create a rounded table in Bootstrap 5? </h2>
    </center>
    <table class="table table-sm table-bordered 
            bg-danger text-light rounded-pill">
        <thead>
            <tr style="text-align: center;">
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr style="text-align: center;">
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>$29</td>
            </tr>
            <tr style="text-align: center;">
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>$25</td>
            </tr>
            <tr style="text-align: center;">
                <th scope="row">3</th>
                <td>JS- Basics</td>
                <td>$35</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>