Border utilities
Utility classes which can be used to set the border
and border-radius
of elements.
Create amazing Typeform-like forms and pages just by writing Markdown!
Adding borders #
You can add borders using .border
/ .border-{side}
, where the {side}
can be top
, end
, bottom
, or start
.
HTML
<!-- 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
.
HTML
<!-- 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:
CSS
.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
.
HTML
<!-- 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.
HTML
<!-- 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
.
HTML
<!-- 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
.
HTML
<!-- 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.
HTML
<!-- 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>
HTML
<!-- 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>
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.