Bootstrap Lesson: Rounded corners / border radius
and how to not corners, rounded or not.
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](https://mdbootstrap.com/docs/standard/utilities/borders/).*
