How to use rounded in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Use Rounded Corners in Bootstrap Easily

In Bootstrap, you use the rounded class to add rounded corners to elements. You can also use variations like rounded-sm, rounded-lg, or rounded-circle for different corner styles.

📐

Syntax

Bootstrap provides several classes to add rounded corners to elements:

rounded: Adds a border radius to all corners.
rounded-sm: Adds a smaller border radius.
rounded-lg: Adds a larger border radius.
rounded-circle: Makes the element perfectly circular (useful for images or buttons).
rounded-pill: Makes the element have pill-shaped rounded edges.
rounded-top, rounded-bottom, rounded-start, rounded-end: Round only specific corners.

html

<div class="rounded bg-primary text-white p-3">Rounded</div>
<div class="rounded-sm bg-secondary text-white p-3 mt-2">Rounded Small</div>
<div class="rounded-lg bg-success text-white p-3 mt-2">Rounded Large</div>
<div class="rounded-circle bg-danger text-white d-inline-block p-3 mt-2" style="width: 100px; height: 100px;">Circle</div>
<div class="rounded-pill bg-warning text-dark p-3 mt-2">Rounded Pill</div>

Output

Five colored boxes stacked vertically: the first with rounded corners, the second with smaller corners, the third with larger corners, the fourth is a red circle, and the fifth is a pill-shaped yellow box.

💻

Example

This example shows how to apply different rounded classes to buttons and images to create visually appealing shapes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Rounded Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-4">
  <button class="btn btn-primary rounded">Rounded Button</button>
  <button class="btn btn-secondary rounded-pill ms-2">Pill Button</button>
  <img src="https://via.placeholder.com/100" alt="Placeholder" class="rounded-circle ms-3" />
</body>
</html>

Output

A page with two buttons: one with normal rounded corners and one pill-shaped, plus a circular image next to them.

⚠️

Common Pitfalls

Some common mistakes when using Bootstrap's rounded classes include:

Not including Bootstrap CSS, so the classes have no effect.
Using rounded-circle on non-square elements, which can distort the shape.
Expecting rounded to make very large curves; use rounded-lg or rounded-pill instead.
Overlapping margin or padding that hides the rounded effect.

html

<!-- Wrong: Using rounded-circle on a rectangular div -->
<div class="rounded-circle bg-info text-white p-3" style="width: 150px; height: 100px;">Distorted Circle</div>

<!-- Right: Use a square shape for rounded-circle -->
<div class="rounded-circle bg-info text-white p-3" style="width: 100px; height: 100px;">Perfect Circle</div>

Output

Two blue boxes: the first is an oval shape with distorted corners, the second is a perfect circle.

📊

Quick Reference

Class	Effect
rounded	Border radius on all edges
rounded-sm	Smaller rounded corners
rounded-lg	Larger rounded corners
rounded-circle	Makes element circular (requires square shape)
rounded-pill	Pill-shaped rounded edges
rounded-top	Rounds only the top corners
rounded-bottom	Rounds only the bottom corners
rounded-start	Rounds only the left corners (LTR)
rounded-end	Rounds only the right corners (LTR)

✅

Key Takeaways

Use the rounded class to add rounded corners easily in Bootstrap.

Choose from size variations like rounded-sm or rounded-lg for different corner radii.

Use rounded-circle only on square elements to avoid distortion.

Combine rounded classes with Bootstrap utilities for flexible styling.

Always include Bootstrap CSS for the classes to work.