Bootstrap Borders

Border utilities are Bootstrap classes used to control the borders around HTML elements.

They can be used to:

• Add borders.
• Remove borders.
• Add a border to a specific side.
• Change border colors.
• Create rounded corners.
• Create circular elements.
• Create pill-shaped elements.

The border class adds a border to all four sides of an element.

<div class="border p-3">

    This element has a border.

</div>

This is one of the most commonly used Bootstrap border utilities.

The border-0 class removes the border from an element.

<div class="border border-0 p-3">

    Border Removed

</div>

It is useful when an existing component has a border that you do not want to display.

The border-top class adds a border only to the top side.

<div class="border-top p-3">

    Top Border

</div>

The border-end class adds a border to the logical end side of an element.

<div class="border-end p-3">

    End Border

</div>

In a normal left-to-right layout, the end side is the right side.

The border-bottom class adds a border to the bottom side.

<div class="border-bottom p-3">

    Bottom Border

</div>

The border-start class adds a border to the logical start side.

<div class="border-start p-3">

    Start Border

</div>

For a left-to-right page, the start side is normally the left side.

Bootstrap provides side-specific classes for removing borders.

<div class="border border-top-0 p-3">

    No Top Border

</div>

Other examples include:

• border-end-0
• border-bottom-0
• border-start-0

The border-primary class changes the border color to the Bootstrap primary color.

<div
class="border border-primary p-3">

    Primary Border

</div>

The border-secondary class applies the Bootstrap secondary border color.

<div
class="border border-secondary p-3">

    Secondary Border

</div>

The border-success class applies the Bootstrap success border color.

<div
class="border border-success p-3">

    Success Border

</div>

The border-danger class applies the Bootstrap danger border color.

<div
class="border border-danger p-3">

    Danger Border

</div>

The border-warning class applies the Bootstrap warning border color.

<div
class="border border-warning p-3">

    Warning Border

</div>

The border-info class applies the Bootstrap info border color.

<div
class="border border-info p-3">

    Info Border

</div>

The border-light class applies the Bootstrap light border color.

<div
class="border border-light p-3">

    Light Border

</div>

The border may be difficult to see on a light background.

The border-dark class applies the Bootstrap dark border color.

<div
class="border border-dark p-3">

    Dark Border

</div>

The border-white class applies a white border.

<div
class="border border-white bg-dark text-white p-3">

    White Border

</div>

A dark background makes the white border easier to see.

Bootstrap provides utilities for controlling border width.

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

<div class="border border-2">
    Border 2
</div>

<div class="border border-3">
    Border 3
</div>

<div class="border border-4">
    Border 4
</div>

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

The numeric border utilities increase the border width.

The rounded class adds rounded corners to an element.

<div class="border rounded p-4">

    Rounded Box

</div>

It is commonly used with cards, images, buttons, and containers.

The rounded-top class rounds only the top corners.

<div
class="border rounded-top p-4">

    Rounded Top

</div>

The rounded-end class rounds the logical end corners.

<div
class="border rounded-end p-4">

    Rounded End

</div>

In a left-to-right layout, the end side is normally the right side.

The rounded-bottom class rounds the bottom corners.

<div
class="border rounded-bottom p-4">

    Rounded Bottom

</div>

The rounded-start class rounds the logical start corners.

<div
class="border rounded-start p-4">

    Rounded Start

</div>

For a left-to-right layout, the start side is normally the left side.

The rounded-circle class creates a circular shape when the element has equal width and height.

<img
src="profile.jpg"
class="rounded-circle"
width="120"
height="120"
alt="Profile photo">

It is commonly used for profile images and avatars.

The rounded-pill class creates highly rounded, pill-shaped corners.

<span
class="badge bg-primary rounded-pill">

    New

</span>

It is commonly used with badges and compact labels.

The rounded-0 class removes border-radius from an element.

<div
class="border rounded rounded-0 p-4">

    Square Corners

</div>

It can be useful when you want completely square corners.

Border utilities can be combined with cards to create custom card designs.

<div
class="card border border-primary">

    <div class="card-body">

        <h4>
            Bootstrap Course
        </h4>

        <p>
            Learn Bootstrap step by step.
        </p>

    </div>

</div>

Avoid these common mistakes:

• Using border-primary without adding a border first when no border is otherwise present.
• Using border-0 when you only wanted to remove one side.
• Forgetting the difference between border-start and border-left.
• Using too many border colors in one design.
• Creating circular elements without equal width and height.
• Using a light border on a light background where it cannot be seen clearly.
• Using large border widths unnecessarily.

The following example combines borders, border colors, rounded corners, and spacing utilities.

<div
class="card
border
border-primary
rounded-4
p-3">


    <div class="card-body text-center">


        <img
        src="profile.jpg"
        class="rounded-circle mb-3"
        width="100"
        height="100"
        alt="Profile photo">


        <h3>
            Rahul Kumar
        </h3>


        <p>
            Bootstrap Student
        </p>


        <span
        class="badge
        bg-primary
        rounded-pill">

            Student

        </span>


    </div>


</div>

This complete example combines border width, border color, rounded corners, badges, and buttons.

<div
class="card
border
border-3
border-primary
rounded-4
overflow-hidden">


    <div
    class="card-header
    bg-primary
    text-white">

        Bootstrap Course

    </div>


    <div class="card-body">


        <h4 class="card-title">

            Learn Bootstrap

        </h4>


        <p class="card-text">

            Learn Bootstrap
            from beginner to
            advanced level.

        </p>


        <span
        class="badge
        bg-success
        rounded-pill">

            60 Lessons

        </span>


        <hr>


        <button
        class="btn btn-primary
        rounded-pill">

            Start Learning

        </button>


    </div>


</div>