Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Additive

<div className="docs-example-border-utils">
    <span className="border"></span>
    <span className="border-top"></span>
    <span className="border-end"></span>
    <span className="border-bottom"></span>
    <span className="border-start"></span>
</div>

Subtractive

<div className="docs-example-border-utils docs-example-border-utils-0">
    <span className="border-0"></span>
    <span className="border-top-0"></span>
    <span className="border-end-0"></span>
    <span className="border-bottom-0"></span>
    <span className="border-start-0"></span>
</div>

Border color

Change the border color using utilities built on our theme colors.

<div className="docs-example-border-utils">
    <span className="border border-primary"></span>
    <span className="border border-secondary"></span>
    <span className="border border-success"></span>
    <span className="border border-danger"></span>
    <span className="border border-warning"></span>
    <span className="border border-info"></span>
    <span className="border border-light"></span>
    <span className="border border-dark"></span>
    <span className="border border-white"></span>
</div>

Border radius

Add classes to an element to easily round its corners.

...
<Image src="/images/docs/placeholder-img.jpg" alt="..." className="rounded me-1" />
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-top me-1"/>
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-end me-1"/>
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-bottom me-1"/>
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-start me-1" />
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-circle me-1" />
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-pill me-1" />
<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-0 me-1" />

Sizes

Use.or .rounded-0 for larger or smaller border-radius.

<Image src="/images/docs/placeholder-img.jpg" alt="" className="rounded-0" />
<Image src="/images/docs/placeholder-img.jpg" alt="" />