Border utilities

Halfmoon comes with utility classes which can be used to set the border and border-radius properties of elements.

Adding borders #

Borders can be added in the following ways:

  • .border class adds a border to all sides of the element.
  • .border-{side} class adds a border only to the given side of the element.

The {side} can be top, bottom, left, or right.

<!-- Border on all sides -->
<div class="border">
  ...
</div>
<!-- Border only on top -->
<div class="border-top">
  ...
</div>
<!-- Border only on bottom -->
<div class="border-bottom">
  ...
</div>
<!-- Border only on left -->
<div class="border-left">
  ...
</div>
<!-- Border only on right -->
<div class="border-right">
  ...
</div>

Removing borders #

Borders can be removed in the following ways:

  • .border-0 class removes all the borders from the element.
  • .border-{side}-0 class removes the border only from the given side of the element.

Once again, the {side} can be top, bottom, left, or right.

<!-- No borders -->
<div class="border border-0">
  ...
</div>
<!-- No border on top -->
<div class="border border-top-0">
  ...
</div>
<!-- No border on bottom -->
<div class="border border-bottom-0">
  ...
</div>
<!-- No border on left -->
<div class="border border-left-0">
  ...
</div>
<!-- No border on right -->
<div class="border border-right-0">
  ...
</div>

Setting the border radius #

The border-radius property can be set using the following classes:

  • The .rounded-0 class sets the border-radius property to 0.
  • The .rounded class creates rounded corners.
  • The .rounded-circle class sets the border-radius property to 50%.
  • The .rounded-{side} class creates rounded corners only on the given side of the element.

Once again, the {side} can be top, bottom, left, or right.

<!-- No rounded corners -->
<div class="border rounded-0">
  ...
</div>
<!-- Rounded corners on all sides -->
<div class="border rounded">
  ...
</div>
<!-- Rounded circle -->
<div class="border rounded-circle">
  ...
</div>
<!-- Rounded corners only on the top -->
<div class="border rounded-top">
  ...
</div>
<!-- Rounded corners only on the bottom -->
<div class="border rounded-bottom">
  ...
</div>
<!-- Rounded corners only on the left -->
<div class="border rounded-left">
  ...
</div>
<!-- Rounded corners only on the right -->
<div class="border rounded-right">
  ...
</div>

Adding transparent borders #

Transparent borders can also be set using the following classes:

  • The .border-transparent class sets a transparent border on all sides.
  • The .border-{side}-transparent class sets a transparent border on the given side.

Once again, the {side} can be top, bottom, left, or right.

<!-- Transparent border on all sides -->
<div class="border border-transparent">
  ...
</div>
<!-- Transparent border only on top -->
<div class="border border-top-transparent">
  ...
</div>
<!-- Transparent border only on bottom -->
<div class="border border-bottom-transparent">
  ...
</div>
<!-- Transparent border only on left -->
<div class="border border-left-transparent">
  ...
</div>
<!-- Transparent border only on right -->
<div class="border border-right-transparent">
  ...
</div>

An interesting use case for transparent borders is removing margin collapse . Margin collapse can be removed by adding a border, but you may not always want a border on that element. In such cases, transparent borders are a quick and easy solution.

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.