Bootstrap Lesson: Rounded corners / border radius

This lesson will be easy, sweet, and short. We will learn how to add rounded corners in Bootstrap and use the border radius property.

Rounded corners are a detail, but very important in design.

Note:*In designu theory, rounded corners require less cognitive (i.e. related to learning and understanding reality) effort. They also look friendlier to us. Why?*

This is related to the so-called "contour bias"*, which makes us associate sharp edges with danger (like the fangs and claws of a wild animal, which our ancestors lived in fear of). In contrast to them, there are gentle and rounded edges, which seem more friendly and safe to us.*

How to add border radius?

In CSS, the border-radius property is responsible for rounded corners.

In Bootstrap, it's very easy to add rounded corners to any element and manipulate the border-radius property.

Just add class rounded- + size unit to the element. You have units from 0 (removes rounded corners) up to 9, so to add for example slightly rounded corners you can use class rounded-4 or similar.

<!-- border-radius: 0px; -->
<img src="..." class="rounded-0" alt="...">

<!-- border-radius: .2rem; -->
<img src="..." class="rounded-1" alt="...">

<!-- border-radius: .25rem; -->
<img src="..." class="rounded-2" alt="...">

<!-- border-radius: .3rem; -->
<img src="..." class="rounded-3" alt="...">

<!-- border-radius: .375rem; -->
<img src="..." class="rounded-4" alt="...">

<!-- border-radius: .5rem; -->
<img src="..." class="rounded-5" alt="...">

<!-- border-radius: .75rem; -->
<img src="..." class="rounded-6" alt="...">

<!-- border-radius: .1rem; -->
<img src="..." class="rounded-7" alt="...">

<!-- border-radius: 1.25rem; -->
<img src="..." class="rounded-8" alt="...">

<!-- border-radius: 1.5rem; -->
<img src="..." class="rounded-9" alt="...">

Add rounded corners to the carousel

Now let's add rounded corners to our carousel via the rounded-6 class.

To modify the appearance of the carousel, we need to add the rounded-6 class to the carousel-inner element.

<!-- Inner -->
<div class="carousel-inner rounded-6">

After saving the file and refreshing your browser, you'll see that our carousel now has cute rounded corners.

Note:*If you want to learn more about modifying border properties have a look at our[border utilities documentation page](mdbootstrap.com/docs/standard/utilities/bor..).*

Demo & source code for this lesson