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).

Example

<div class="border m-3 p-1">Border on all sides</div>

<div class="border-top m-3 p-1">Border on top</div>

<div class="border-end m-3 p-1">Border on the right</div>

<div class="border-bottom m-3 p-1">Border on the bottom</div>

<div class="border-start m-3 p-1">Border on the left</div>

Try it yourself

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.

Example

<div class="border border-0">No border</div>

<div class="border border-1">Thin border</div>

<div class="border border-5">Thick border</div>

Try it yourself

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.

Example

<div class="border border-primary">Blue border</div>

<div class="border border-danger">Red border</div>

<div class="border border-success">Green border</div>

Try it yourself

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. rounded-1 (3.2px) rounded-2 (4px) rounded-3 (4.8px) rounded-4 (8px) rounded-5 (16px)

Example

<div class="border rounded">Slightly rounded corners</div>

<div class="border rounded-circle">Circular shape</div>

<div class="border rounded-pill">Pill-shaped corners</div>

Try it yourself

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.

Example

<div class="border border-0">No border</div>

<div class="border border-top-0">No top border</div>

<div class="border border-bottom-0">No bottom border</div>

Try it yourself

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).

Example

<div class="border border-primary border-opacity-50">50% transparent border</div>

<div class="border border-success border-opacity-75">75% transparent border</div>

Try it yourself

Combining Border Classes:

You can mix and match border classes to customize your styles further:

Example

Thick green rounded border

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Basic Border Classes:

Class

Description

Border Width:

Class

Description

Border Color:

Class

Description

Rounded Borders (Border Radius):

Removing Borders:

Border Opacity:

Combining Border Classes: