Advertisement
Google Ad Slot: content-top
Bootstrap 5 Border
Bootstrap 5 provides border utility classes that make it easy to add and customize borders for elements. These utilities allow you to control border styles, widths, colors, and rounding.
Basic Border Classes:
To add a border around an element:
Class |
Description |
|---|---|
|
border |
Adds a border to all sides. |
|
border-top |
Adds a border to the top only. |
|
border-end |
Adds a border to the right (LTR). |
|
border-bottom |
Adds a border to the bottom only. |
|
border-start |
Adds a border to the left (LTR). |
Border Width:
Control the thickness of borders:
Class |
Description |
|---|---|
|
border-0 |
Removes the border. |
|
border-1 |
Adds a border width of 1px. |
|
border-2 |
Adds a border width of 2px. |
|
border-3 |
Adds a border width of 3px. |
|
border-4 |
Adds a border width of 4px. |
|
border-5 |
Adds a border width of 5px. |
Border Color:
Add Bootstrap’s contextual colors to borders:
Class |
Description |
|---|---|
|
border-primary |
Adds a blue border. |
|
border-secondary |
Adds a gray border. |
|
border-success |
Adds a green border. |
|
border-danger |
Adds a red border. |
|
border-warning |
Adds a yellow border. |
|
border-info |
Adds a teal border. |
|
border-light |
Adds a light border. |
|
border-dark |
Adds a dark border. |
|
border-white |
Adds a white border. |
Rounded Borders (Border Radius):
Make corners rounded using these classes:
|
Class |
Description |
|---|---|
|
rounded |
Adds slightly rounded corners. |
|
rounded-top |
Rounds the top corners only. |
|
rounded-end |
Rounds the right corners only. |
|
rounded-bottom |
Rounds the bottom corners only. |
|
rounded-start |
Rounds the left corners only. |
|
rounded-circle |
Fully rounded (circular). |
|
rounded-pill |
Rounded corners (pill-shaped). |
|
rounded-0 |
No rounding (sharp corners). |
|
rounded-1 and rounded-5 |
Incremental rounding levels.
|
Removing Borders:
Remove borders from elements with border-0 for all sides or specific sides:
|
Class |
Description |
|---|---|
|
border-0 |
Removes all borders. |
|
border-top-0 |
Removes top border only. |
|
border-end-0 |
Removes right border only. |
|
border-bottom-0 |
Removes bottom border only. |
|
border-start-0 |
Removes left border only. |
Border Opacity:
Adjust border transparency using opacity utilities:
|
Class |
Description |
|---|---|
|
border-opacity-25 |
25% opacity. |
|
border-opacity-50 |
50% opacity. |
|
border-opacity-75 |
75% opacity. |
|
border-opacity-100 |
Full opacity (default). |
Combining Border Classes:
You can mix and match border classes to customize your styles further: