Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

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.

rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 rounded-6 rounded-7 rounded-8 rounded-9 
        
            
  
<!-- 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.
Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.