Border utilities

Utility classes which can be used to set the border and border-radius of elements.

Adding borders #

You can add borders using .border / .border-{side}, where the {side} can be top, end, bottom, or start.

<!-- Adding borders -->
<div class="border">...</div>
<div class="border-top">...</div>
<div class="border-end">...</div>
<div class="border-bottom">...</div>
<div class="border-start">...</div>

Removing borders #

You can also remove borders using .border-0 / .border-{side}-0, where the {side} can be top, end, bottom, or start.

<!-- Removing borders -->
<div class="border border-0">...</div>
<div class="border border-top-0">...</div>
<div class="border border-end-0">...</div>
<div class="border border-bottom-0">...</div>
<div class="border border-start-0">...</div>

Color #

The border color can be changed using .border-{color}. Please note, these classes only affect the border-color property specifically, therefore, you may still need to add a border first (using .border or otherwise) for them to work properly. You can see the full list of these classes in the table below:


Opacity #

Consider the default CSS for the .border-primary utility:

.border-primary {
  --bs-border-opacity: 1;
  border-color: hsla(var(--bs-primary-hsl), var(--bs-border-opacity)) !important;

We use an HSL version of our --bs-primary CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value of 1 thanks to a local CSS variable). That means anytime you use .border-primary now, your computed color value is hsla(var(--bs-primary-hsl), 1). The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Opacity Example #

You can modify the border opacity using the .border-opacity-{value} utilities, where the {value} can be a percentage of 75, 50, 25, or 10.

<!-- Modifying border opacities with utilities -->
<div class="border border-primary">...</div>
<div class="border border-primary border-opacity-75">...</div>
<div class="border border-primary border-opacity-50">...</div>
<div class="border border-primary border-opacity-25">...</div>
<div class="border border-primary border-opacity-10">...</div>

You can also override --bs-border-opacity via custom styles or inline styles.

<!-- Modifying border opacities with CSS variables -->
<div class="border border-primary">...</div>
<div class="border border-primary" style="--bs-border-opacity: 60%;">...</div>
<div class="border border-primary" style="--bs-border-opacity: 30%;">...</div>

Width #

The border-width can be set using .border-{size}, where the {size} can be 1, 2, 3, 4, or 5.

<!-- Setting border widths -->
<div class="border border-1">...</div>
<div class="border border-2">...</div>
<div class="border border-3">...</div>
<div class="border border-4">...</div>
<div class="border border-5">...</div>

Radius #

The border-radius can be set using .rounded / .rounded-{side}, where the {side} can be top, end, bottom, or start.

<!-- Setting border radii -->
<div class="rounded">...</div>
<div class="rounded-top">...</div>
<div class="rounded-end">...</div>
<div class="rounded-bottom">...</div>
<div class="rounded-start">...</div>

Radius Sizes #

You can also control the amount of roundedness using .rounded-{size} / .rounded-{side}-{size}, where the {size} can be 0, 1, 2, 3, 4, 5, circle, or pill. Please note, setting {size} to 0 will remove rounded corners all together.

<!-- Setting border radii and sizes -->
<div class="rounded-1">...</div>
<div class="rounded-2">...</div>
<div class="rounded-3">...</div>
<div class="rounded-4">...</div>
<div class="rounded-5">...</div>

<div class="rounded-0">...</div>
<div class="rounded-circle">...</div>
<div class="rounded-pill">...</div>
<!-- Setting border radii, sides, and sizes -->
<div class="rounded-bottom-1">...</div>
<div class="rounded-start-2">...</div>
<div class="rounded-end-circle">...</div>
<div class="rounded-start-pill">...</div>
<div class="rounded-5 rounded-top-0">...</div>
Up next
Box shadow utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.