Border radius

Bootstrap 5 Border radius component

Responsive Border radius with Bootstrap 5. Use border radius to define the radius of the element's corners.

Basic example

Add classes to an element to easily round its corners.

Edit in sandbox 
        
            
            <img src="..." class="rounded" alt="...">
            <img src="..." class="rounded-top" alt="...">
            <img src="..." class="rounded-end" alt="...">
            <img src="..." class="rounded-bottom" alt="...">
            <img src="..." class="rounded-start" alt="...">
            <img src="..." class="rounded-pill" alt="...">
            <img src="..." class="rounded-0" alt="...">

Border Radius sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 9, and can be configured by modifying the utilities API.

Edit in sandbox 
        
            
            <!-- 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="...">

Border radius circle

Add rounded-circle class to change the shape of your element to circle. It is a perfect solution for avatars.

Edit in sandbox 
        
            
            <img src="..." class="rounded-circle" alt="...">

Border radius 0

Add rounded-0 class to change the shape of your element to square.

Edit in sandbox 
        
            
            <img src="..." class="rounded-0" alt="...">

Border radius rounded

Add rounded class to round all the vertices of the square.

Edit in sandbox 
        
            
            <img src="..." class="rounded" alt="...">

Border radius top

Add rounded-top class to round the top vertices of the square.

Edit in sandbox 
        
            
            <img src="..." class="rounded-top" alt="...">

Border radius bottom

Add rounded-bottom class to round the bottom vertices of the square.

Edit in sandbox 
        
            
            <img src="..." class="rounded-bottom" alt="...">

Border radius on just one image

Style your image easily using selected border radius class.

In this example we are using rounded class on the avatar image but feel free to choose the most convenient class for you!

Avatar
Edit in sandbox 
        
            
            <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded" style="width: 150px;" alt="Avatar">