Border Radius (Rounded Corners) in bootstrap 5 with examples

0 114 3 minutes read

Table of Contents

Description:

Bootstrap 5 is a popular front-end web development framework that provides many useful features and tools to create responsive, modern web applications. One of these features is the ability to create rounded corners on various HTML elements using the border-radius utility class.

Creating Rounded Corners Using Bootstrap 5

To create rounded corners in Bootstrap 5, you need to use the border-radius utility class. This class can be applied to any HTML element that has a border, such as a div, button, or input field.

The basic syntax of the border-radius class is as follows:

rounded-{value}

1	rounded-{value}

Here, {value} is the size of the rounded corners in pixels or a predefined value such as sm, md, or lg.

For example, if you want to create small rounded corners on a div element, you can use the following code:

<div class="rounded-sm">This div has small rounded corners.</div>

1	<div class="rounded-sm">This div has small rounded corners.</div>

Similarly, if you want to create medium-rounded corners on a button element, you can use the following code:

<button class="btn btn-primary rounded-md">Click me!</button>

1	<button class="btn btn-primary rounded-md">Click me!</button>

You can also create large rounded corners by using the rounded-lg class.

Customizing the Border Radius Values

If you want to customize the size of the rounded corners, you can use the rounded-{side}-{value} class. Here, {side} can be top, bottom, start, or end, and {value} is the size of the rounded corners in pixels or a predefined value.

For example, if you want to create small rounded corners on the top-left and bottom-right corners of a div element, you can use the following code:

<div class="rounded-top-sm rounded-end-sm">
This div has small rounded corners on the top-left and bottom-right corners.
</div>

This div has small rounded corners on the top-left and bottom-right corners.

</div>

Similarly, if you want to create large rounded corners on the top and bottom sides of a button element, you can use the following code:

<button class="btn btn-primary rounded-top-lg rounded-bottom-lg">
Click me!
</button>

Click me!

</button>

Creating rounded corners using Bootstrap 5 is easy and straightforward. By using the border-radius utility class, you can add rounded corners to various HTML elements in your web application. Whether you want small, medium, or large rounded corners, Bootstrap 5 provides predefined values that you can use. You can also customize the size of the rounded corners using the rounded-{side}-{value} class. With these options, you can create beautiful, modern web applications with rounded corners that look great on any device.

How to Make Rounded Corners (Border Radius) in Bootstrap

To create a rounded corners effect , Bootstrap provides several classes. Here’s the list:

.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill

Class .rounded is used to create a rounded corners effect on all 4 corners.

Class .rounded-top is used to create a rounded corners effect in both upper corners, namely the upper left and upper right corners.

Class .rounded-end is used to create a rounded corners effect in both right corners, namely the upper right and lower right corners.

Class .rounded-bottom is used to create a rounded corners effect in both lower corners, namely the lower left and lower right corners.

Class .rounded-start is used to create a rounded corners effect in both left corners, namely the upper left and lower left corners.

Class is .rounded-circle used to create a circle effect.

Class .rounded-pill is used to make a pill effect or rounded on both sides. Requirements for this class element must be rectangular, otherwise, the effect will be the same as .rounded-circle.

The following is an example of using these 7 classes:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Background Color Tutorial</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
 
<style>
      div > div {
        height: 100px;
        width: 100px;
        float: left;
        margin : 0.3em;
        text-align: center;
        padding: 20px 10px;
      }
    </style>
  </head>
  <body>
  
  <div class="container-fluid">
   <div class="border border-primary rounded">.rounded</div>
   <div class="border border-primary rounded-top">.rounded-top</div>
   <div class="border border-primary rounded-end">.rounded-end</div>
   <div class="border border-primary rounded-bottom">.rounded-bottom</div>
   <div class="border border-primary rounded-start">.rounded-start</div>
   <div class="border border-primary rounded-circle">.rounded-circle</div>
   <div style="width: 150px;" class="border border-primary rounded-pill">
     .rounded-pill</div>
   <div style="width: 50px;" class="border border-primary rounded-pill">
     .pill</div>
  </div>
      
  <script src="js/bootstrap.bundle.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Background Color Tutorial</title>

<style>

div > div {

height: 100px;

width: 100px;

float: left;

margin : 0.3em;

text-align: center;

padding: 20px 10px;

}

</style>

</head>

<body>

<div class="border border-primary rounded">.rounded</div>

<div class="border border-primary rounded-top">.rounded-top</div>

<div class="border border-primary rounded-end">.rounded-end</div>

<div class="border border-primary rounded-bottom">.rounded-bottom</div>

<div class="border border-primary rounded-start">.rounded-start</div>

<div class="border border-primary rounded-circle">.rounded-circle</div>

.rounded-pill</div>

.pill</div>

</div>

</body>

</html>

Create a Border Radius (Rounded Corners) in bootstrap

Set the Curvature Radius

Internally, Bootstrap uses a 0.25rem radius for every corner, except for classes that use a 50%.rounded-circle radius.

If we want to adjust the radius of curvature, 4 advanced classes are available:

.rounded-0
.rounded-1
.rounded-2
.rounded-3

Class .rounded-0 is used to delete the existing border radius, while class .rounded-1, .rounded-2, and is .rounded-3 are used to create a border radius of 0.2rem, 0.25rem, and 0.3rem. Here’s an example of its use:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Background Color Tutorial</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
 
<style>
      div > div {
        height: 100px;
        width: 100px;
        float: left;
        margin : 0.3em;
        text-align: center;
        padding: 20px 10px;
      }
    </style>
  </head>
  <body>
 
    <div class="container-fluid">
      <div class="border border-primary rounded-0">.rounded-0</div>
      <div class="border border-primary rounded-1">.rounded-1</div>
      <div class="border border-primary rounded-2">.rounded-2</div>
      <div class="border border-primary rounded-3">.rounded-3</div>
    </div>
     
  <script src="js/bootstrap.bundle.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Background Color Tutorial</title>

<style>

div > div {

height: 100px;

width: 100px;

float: left;

margin : 0.3em;

text-align: center;

padding: 20px 10px;

}

</style>

</head>

<body>

<div class="border border-primary rounded-0">.rounded-0</div>

<div class="border border-primary rounded-1">.rounded-1</div>

<div class="border border-primary rounded-2">.rounded-2</div>

<div class="border border-primary rounded-3">.rounded-3</div>

</div>

</body>

</html>

Create a Border Radius (Rounded Corners) in bootstrap

As can be seen from the display above, the larger the class used, the more rounded the border corners will be.

Thus our tutorial on how to make rounded corners or a border radius using the Bootstrap 5 framework. In my previous article, I explained how to change the background color in Bootstrap 5. Next, we will continue with material on how to create a shadow or shadow effect in Bootstrap 5.