Border utilities
Halfmoon comes with utility classes which can be used to set the border and border-radius properties of elements.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
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.
Up next:
Box shadow utilities
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
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.
