Using and Customizing Bootstrap Border Radius: 3 Examples!

Bootstrap 5 comes with seven different border radius classes for precisely targeting different corners of elements. In this tutorial I will explore the default border radius class styling as well as how to override a the SASS variable used in all the classes.

Here’s what we will create:

We’ll create several other stylings along the way. Here are the Bootstrap Border Radius Docs. Full code for this tutorial is in the Resources section.

How to Use the 7 Default Bootstrap Border Radius Classes

I created seven divs, one for each Bootstrap border radius class. They are pictured below, and you can see in dev tools the seven border radius classes applied:

I highlighted the rounded-end class as an example. We can see that it uses SASS variable --bs-border-radius to set the border radius value for two corners. All seven of the border radius classes use this variable so that values are consistent across the app.

This means we have two options for customizing border radius:

• customize individual classes, i.e. rounded
• customize the --bs-border-radius value in our app

The border radius classes are utility classes similar to the Bootstrap padding classes. Bootstrap also has border width utility classes.

Overriding the Bootstrap Rounded Border Radius Class

We can override an existing Bootstrap class simply by creating a duplicate in our CSS or SCSS file:

//BorderRadiusStyles.scss
.rounded {
  border-radius: 1rem !important;
}

Unfortunately the --bs-border-radius value uses important, so we also need important in our rounded class.

Looking at dev tools, I can see my new class is overriding the default rounded class:

Here’s an example of rounded-start border radius in the Bootstrap Navbar.

Overriding the Bootstrap bs-border-radius Class

If we want to change the border radius for all of the classes, we can update the --bs-border-radius SASS variable. This method ensures consistency throughout all styling in our app, or at least component that has access to this style sheet.

First, let’s see what the current value of the variable is:

I have to dig into the styles section of Dev Tools to find the value of 0.375rem. Fortunately, overwriting the value is simple. Here’s the code for customizing the Bootstrap SASS variable:

//BorderRadiusStyles.scss
:root {
  --bs-border-radius: 1.5rem;
}

We can see in Dev Tools that the :root styling is picking up our new variable value:

Now all seven of the border radius classes will have stronger rounding of 1.5rem on their corners. This is similar to updating theme in MUI to customize border radius.

In my example I applied the border radius classes only to divs. However, they can be applied to any element or component. Here’s an example of a React-Bootstrap Button with the rounded class applied:

Border radius can be used to style Bootstrap icon buttons, and we can add arrows to ToolTips through custom borders.

Resources

Check out this tutorial where I create a notched outline effect in the Bootstrap InputGroup.

Full code for this tutorial:

//BorderRadiusStyles.scss
:root {
  --bs-border-radius: 1.5rem;
}

.box {
  width: 5rem;
  height: 5rem;
  border: .25rem solid grey;
  margin-right: 12px;
}

.rectangle {
  width: 10rem;
  height: 5rem;
  border: .25rem solid grey;
}

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

//CustomBorderRadius.tsx
import React from "react";
import "./BorderRadiusStyles.scss";

export default function CustomBorderRadius() {
  return (
    <div style={{ marginTop: 24, marginLeft: 12, display: "flex" }}>
      <div className="box rounded" />
      <div className="box rounded-top" />
      <div className="box rounded-end" />
      <div className="box rounded-bottom" />
      <div className="box rounded-start" />
      <div className="box rounded-circle" />
      <div className="rectangle rounded-pill" />
    </div>
  );
}