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:00The Ultimate Guide to Financial Charts: Build Candlestick, Waterfall, and Pareto Charts with Chart.js
Duration: 00:00 | DP | 2026-01-11 08:11:36The Ultimate Guide to CSS Colors: From RGBA to HSL for Beginners
Duration: 00:00 | DP | 2025-12-14 14:51:40The Ultimate Guide to Centering in Bootstrap: From `.text-center` to Flexbox
Duration: 00:00 | DP | 2025-12-15 15:23:20Bootstrap Border Magic: Instantly Add Top or Bottom Borders to Elements
Duration: 00:00 | DP | 2025-11-22 08:08:00The Ultimate Guide to JavaScript Diff Libraries: A Side-by-Side Comparison of jsdiff, diff2html, and More
Duration: 00:00 | DP | 2025-11-23 08:08:00Bootstrap JS Deep Dive: `bootstrap.bundle.js` vs. `bootstrap.js` - Which One Should You Use?
Duration: 00:00 | DP | 2025-11-27 08:08:00Is Attaching a JS Event Listener to 'document' Bad for Performance? The Truth About Event Delegation
Duration: 00:00 | DP | 2025-11-28 08:08:00The Ultimate Guide to Using Google Fonts on Chinese Websites: Ditch the Lag with an Elegant Font Stack
Duration: 00:00 | DP | 2025-11-16 08:01:00The Ultimate Guide to Seamlessly Switching from Baidu Tongji to Google Analytics 4 in Vue 3
Duration: 00:00 | DP | 2025-11-22 08:57:32Mastering Markdown Spacing: The Ultimate Guide to Controlling Your Document Layout
Duration: 00:00 | DP | 2025-12-19 17:30:00The Ultimate Guide to Centering in Markdown: Align Text and Images Like a Pro
Duration: 00:00 | DP | 2025-12-20 05:45:50A Curated List of Bootstrap Icons for Your Wiki and Knowledge Base
Duration: 00:00 | DP | 2025-11-25 13:41:35Recommended
Debunking ES Modules: Does Static `import` Actually Lazy Load?
00:00 | 44Many developers mistakenly believe static `import`...
Refactoring a JavaScript Monolith: The Ultimate Showdown Between Mixin and Composition Patterns
00:00 | 35Facing a large, monolithic JavaScript file that ne...
MySQL Primary Key Inversion: Swap 1 to 110 with Just Two Lines of SQL
00:00 | 29In database management, you might face the unique ...
Cracking the TypeScript TS2339 Puzzle: Why My Vue ref Became the `never` Type
00:00 | 34Ever encountered the tricky `Property '...' does n...