Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Rounded Images in Bootstrap 5

Rounded Images: Learn how to create rounded corners, circles, and pill-shaped images using Bootstrap's border radius utilities.

Border Radius Classes Overview

Bootstrap 5 provides several classes to control the border radius of images and other elements. These classes help create visually appealing designs with rounded corners.

No Radius

border-radius: 0

Rounded

.rounded

Circle

.rounded-circle

Pill Shape

Pill

.rounded-pill

The .rounded Class

Standard Rounded Corners

The .rounded class adds a standard border radius to all four corners of an element.

/* Default rounded class */
            .rounded {
            border-radius: 0.375rem !important; /* 6px */
            }

            /* Applied to images */
            <Image width={120} height={120}  
            src="image.jpg" 
            class="img-fluid rounded"
            alt="Rounded image"
            />

Small Image

150×100px

Medium Image

300×200px

Large Image

500×300px

When to use .rounded:

Product images in e-commerce
Content images in articles
Feature cards and components
When you want soft, modern edges
Most general-purpose image styling

Rounded Corners with Sizing

Different Border Radius Sizes

Bootstrap provides classes for different border radius sizes:

Small

.rounded-1

0.25rem (4px)

Medium

.rounded-2

0.375rem (6px)

Large

.rounded-3

0.5rem (8px)

Extra Large

.rounded-4

1rem (16px)

XX-Large

.rounded-5

1.5rem (24px)

<!-- Different border radius sizes -->
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-1" alt="Small radius">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-2" alt="Medium radius">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-3" alt="Large radius">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-4" alt="X-Large radius">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-5" alt="XX-Large radius">

            <!-- Note: .rounded is equivalent to .rounded-2 -->

Choosing the Right Size:

.rounded-1: Subtle rounding for professional designs
.rounded-2/.rounded: Standard for most use cases
.rounded-3: Noticeable rounding for modern designs
.rounded-4: Prominent rounding for creative designs
.rounded-5: Extreme rounding for special effects

The .rounded-circle Class

Perfect Circles

The .rounded-circle class creates perfect circles by setting border-radius to 50%.

/* Circle class */
            .rounded-circle {
            border-radius: 50% !important;
            }

            /* Important: Images must be square for perfect circles */
            <Image width={120} height={120}  
            src="avatar.jpg" 
            class="img-fluid rounded-circle"
            alt="Circular avatar"
            width="100"
            height="100"
            />

60px

80px

100px

120px

150px

200px

⚠️ Important Note:

For perfect circles, images must be square (equal width and height). Non-square images will create oval shapes.

Non-Square Images with .rounded-circle

Landscape (200×100px)

Portrait (100×200px)

Square (150×150px)

Individual Corner Rounding

Control Individual Corners

Bootstrap provides classes to round specific corners individually:

Top Corners

.rounded-top

Right Corners

.rounded-end

Bottom Corners

.rounded-bottom

Left Corners

.rounded-start

Top Start

.rounded-top-start

Top End

.rounded-top-end

Bottom End

.rounded-bottom-end

Bottom Start

.rounded-bottom-start

<!-- Individual corner rounding -->
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-top" alt="Top rounded">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-end" alt="Right rounded">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-bottom" alt="Bottom rounded">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-start" alt="Left rounded">

            <!-- Specific corners -->
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-top-start" alt="Top left">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-top-end" alt="Top right">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-bottom-end" alt="Bottom right">
            <Image width={120} height={120}  src="image.jpg" class="img-fluid rounded-bottom-start" alt="Bottom left">

Use Cases for Individual Corner Rounding:

.rounded-top: Cards with images at the top
.rounded-bottom: Cards with content at the top
.rounded-start: Images aligned left in text
.rounded-end: Images aligned right in text
Specific corners: Creative designs and overlays

Combining with Other Classes

Advanced Rounding Combinations

Circle with Border

.rounded-circle + .border-primary

Rounded with Shadow

.rounded + .shadow-lg

Gradient Pill

Pill with Gradient

.rounded-pill + .bg-gradient-primary

Card with custom rounding

Card with Custom Radius

.rounded-4 + .rounded-top-4

Circle with Badge

.rounded-circle + .rounded-pill

Container with Rounding

.rounded-3 + .overflow-hidden

<!-- Circle with colored border -->
            <div class="img-thumbnail rounded-circle border-primary border-3">
            <Image width={120} height={120}  
                src="avatar.jpg" 
                class="rounded-circle"
                alt="Avatar"
                width="100"
                height="100"
            />
            </div>

            <!-- Rounded image with shadow -->
            <Image width={120} height={120}  
            src="image.jpg" 
            class="img-fluid rounded shadow-lg"
            alt="With shadow"
            />

            <!-- Card with custom rounding -->
            <div class="card border-success rounded-4">
            <Image width={120} height={120}  
                src="image.jpg" 
                class="card-img-top rounded-top-4"
                alt="Card image"
            />
            <div class="card-body">
                <p class="card-text">Content</p>
            </div>
            </div>

            <!-- Circle with notification badge -->
            <div class="position-relative d-inline-block">
            <Image width={120} height={120}  
                src="avatar.jpg" 
                class="img-fluid rounded-circle"
                alt="Avatar"
            />
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                3
            </span>
            </div>

Responsive Rounded Corners

Responsive Border Radius

Bootstrap provides responsive classes for border radius that change based on screen size:

Responsive Behavior:

Mobile: Rounded (default .rounded)
Tablet (≥768px): Square (.rounded-md-0)
Desktop (≥992px): Large rounded (.rounded-lg-3)

<!-- Responsive border radius -->
            <Image width={120} height={120}  
            src="image.jpg" 
            class="img-fluid 
                    rounded           /* Mobile */
                    rounded-md-0      /* Tablet - no radius */
                    rounded-lg-3      /* Desktop - large radius */
                    rounded-xl-circle /* XL - circle */"
            alt="Responsive image"
            />

            <!-- Common responsive patterns -->
            <Image width={120} height={120}  class="rounded rounded-lg-circle" ...>
            <!-- Square on mobile, circle on desktop -->

            <Image width={120} height={120}  class="rounded-3 rounded-md-1" ...>
            <!-- Large on mobile, small on tablet -->

            <Image width={120} height={120}  class="rounded-start rounded-md-top" ...>
            <!-- Left rounded on mobile, top rounded on tablet -->

Available Responsive Classes:

Add breakpoint prefixes to any border radius class: .rounded-{breakpoint}-{size}

Breakpoints: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px)

Practical Examples

User Profile Cards

John Doe

Web Developer

HTMLCSSJavaScript

Product Display

Amazing Product

Product description with rounded image corners.

Testimonial Block

Sarah Johnson

"Excellent service! The rounded design makes everything look modern and clean."

Feature Highlight

✓

Feature Enabled

Rounded icons make features stand out beautifully.

Best Practices and Tips

Rounded Images Best Practices

Consistency: Use the same border radius across similar elements
Accessibility: Ensure sufficient contrast between image and background
Performance: Rounded corners are rendered by CSS, not image editing
Responsiveness: Adjust rounding based on screen size when needed
Content consideration: Some images work better with sharp corners
Overflow: Use overflow: hidden for container-based rounding
Modern design: Rounded corners are a key trend in modern UI design

Common Mistakes to Avoid

❌ Using non-square images with .rounded-circle expecting perfect circles
❌ Overusing extreme rounding (.rounded-5) everywhere
❌ Mixing different radius sizes inconsistently
❌ Forgetting to make images responsive with .img-fluid
❌ Not testing rounded corners on different screen sizes
❌ Using images with important content in corners that get cut off

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial