Mastering Bootstrap 5 Rounded Corners: The Ultimate Guide to Border-Radius
Content
## Background
In modern web design, rounded corners are a common element used to enhance user interface friendliness and aesthetics. Bootstrap 5, as a leading front-end framework, provides a powerful and flexible set of `rounded` utility classes that allow developers to easily control the `border-radius` property of elements without writing custom CSS. This article will delve into all the available rounded classes in Bootstrap 5.3 and address a common question: how to apply a border-radius to only one specific corner of an element, such as the top-left.
---
## Bootstrap 5 `rounded` Classes Explained
Bootstrap's `rounded` utility classes can be divided into four main categories: general rounding, size control, positional control, and single-corner control.
### 1. General Rounding and Special Shapes
These are the most basic and frequently used rounded classes.
- `.rounded`: Adds a default-sized border-radius to all corners of an element.
- `.rounded-circle`: Transforms an element (usually a square) into a perfect circle, ideal for avatars.
- `.rounded-pill`: Shapes an element (usually a rectangle) into a pill shape with semicircular ends, often used for buttons or tags.
### 2. Sizing Control
You can precisely control the radius of the corners with numeric suffixes.
- `.rounded-0`: Removes all border-radius, making the element have sharp corners.
- `.rounded-1`: Small border-radius.
- `.rounded-2`: Default border-radius (same as `.rounded`).
- `.rounded-3`: Medium border-radius.
- `.rounded-4`: Large border-radius.
- `.rounded-5`: Extra-large border-radius, the largest available.
### 3. Positional Control by Side
These classes let you apply border-radius to specific sides (top, bottom, left, or right) of an element. Bootstrap 5 uses logical property names `start` and `end` for better support of Left-to-Right (LTR) and Right-to-Left (RTL) layouts.
- `.rounded-top`: Rounds the top-left and top-right corners only.
- `.rounded-end`: In LTR mode, rounds the top-right and bottom-right corners.
- `.rounded-bottom`: Rounds the bottom-left and bottom-right corners.
- `.rounded-start`: In LTR mode, rounds the top-left and bottom-left corners.
### 4. Pinpoint Control (Single Corner)
This is the key to solving the "how to round only the top-left corner" problem. Bootstrap 5 provides classes specifically for controlling individual corners.
- `.rounded-top-start`: Rounds the top-left corner only.
- `.rounded-top-end`: Rounds the top-right corner only.
- `.rounded-bottom-start`: Rounds the bottom-left corner only.
- `.rounded-bottom-end`: Rounds the bottom-right corner only.
---
## Code Demos
Below are some code examples from the `wiki.lib00.com` project, visually demonstrating the usage of these classes.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.3 Rounded Demo by lib00</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-box {
width: 100px;
height: 100px;
margin: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: white;
}
</style>
</head>
<body class="p-4">
<h5>1. General Rounding & Special Shapes</h5>
<div class="demo-box bg-primary rounded">.rounded</div>
<div class="demo-box bg-success rounded-circle">.rounded-circle</div>
<div class="demo-box bg-danger rounded-pill" style="width: 150px;">.rounded-pill</div>
<h5 class="mt-4">2. Sizing Control</h5>
<div class="demo-box bg-secondary rounded-0">.rounded-0</div>
<div class="demo-box bg-secondary rounded-1">.rounded-1</div>
<div class="demo-box bg-secondary rounded-3">.rounded-3</div>
<div class="demo-box bg-secondary rounded-5">.rounded-5</div>
<h5 class="mt-4">3. Positional Control</h5>
<div class="demo-box bg-info text-dark rounded-top">.rounded-top</div>
<div class="demo-box bg-info text-dark rounded-start">.rounded-start</div>
<h5 class="mt-4">4. Core Problem: Top-Left Corner Only</h5>
<div class="demo-box bg-warning text-dark rounded-top-start rounded-5">.rounded-top-start</div>
</body>
</html>
```
As you can see from the last example, to round only the top-left corner, we directly use the `.rounded-top-start` class. To make the effect more noticeable, we also combined it with `.rounded-5` to apply a larger radius.
---
## Conclusion
Bootstrap 5.3's `rounded` utility classes offer fine-grained control over border-radius, from global application to individual corners, significantly simplifying styling tasks. By combining these classes, developers can quickly achieve various rounded effects that meet design requirements. Remember, when you need to manipulate a single corner, the `.rounded-*-*` format classes (like `.rounded-top-start`) are your most direct and effective solution. We hope this guide from `wiki.lib00.com` has been helpful.
Related Contents
Boost Your WebStorm Productivity: Mimic Sublime Text's Cmd+D Multi-Selection Shortcut
Duration: 00:00 | DP | 2025-12-04 21:50:50Vue Layout Challenge: How to Make an Inline Header Full-Width? The Negative Margin Trick Explained
Duration: 00:00 | DP | 2025-12-06 22:54:10Vue's Single Root Dilemma: The Right Way to Mount Both `<header>` and `<main>`
Duration: 00:00 | DP | 2025-12-07 11:10:00The Ultimate CSS Flexbox Guide: Easily Switch Page Header Layouts from Horizontal to Vertical
Duration: 00:00 | DP | 2025-12-11 01:00:50Cracking the TypeScript TS2339 Puzzle: Why My Vue ref Became the `never` Type
Duration: 00:00 | DP | 2025-12-13 02:04:10CSS Deep Dive: The Best Way to Customize Select Arrows for Dark Mode
Duration: 00:00 | DP | 2025-12-13 14:20:00Recommended
Master cURL Timeouts: A Definitive Guide to Fixing "Operation timed out" Errors
00:00 | 8Frequently encountering "cURL Error: Operation tim...
The Ultimate Guide to CSS Colors: From RGBA to HSL for Beginners
00:00 | 7Confused by CSS color values like `rgba(8, 219, 21...
The SEO Dilemma: Is `page=1` Causing a Duplicate Content Disaster?
00:00 | 6In web pagination, `example.com/list` and `example...
The Ultimate PHP Guide: How to Correctly Handle and Store Markdown Line Breaks from a Textarea
00:00 | 12When working on a PHP project, it's a common issue...