Schedule a demo with us
We can help you solve company communication.
We can help you solve company communication.
Simplify your workflow in minutes.
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Additonal border color utilities. Additonal modifier at the end of the utility name means the opacity level.
<div class="me-3 mb-3 border border-white border-opacity-10" style="width: 5rem; height: 5rem;"></div> <div class="me-3 mb-3 border border-white border-opacity-20" style="width: 5rem; height: 5rem;"></div> <div class="me-3 mb-3 border border-gray-300" style="width: 5rem; height: 5rem;"></div> <div class="me-3 mb-3 border border-gray-800" style="width: 5rem; height: 5rem;"></div> <div class="me-3 mb-3 border border-gray-800 border-opacity-50" style="width: 5rem; height: 5rem;"></div> <div class="me-3 mb-3 border border-gray-900 border-opacity-50" style="width: 5rem; height: 5rem;"></div>
Responsive border utilities to add or remove borders only when you need it.
<div class="border-sm"></div> <div class="border-md"></div> <div class="border-lg"></div> <div class="border-xl"></div> <div class="border-top-sm"></div> <div class="border-top-md"></div> <div class="border-top-lg"></div> <div class="border-top-xl"></div> <div class="border-end-sm"></div> <div class="border-end-md"></div> <div class="border-end-lg"></div> <div class="border-end-xl"></div> <div class="border-bottom-sm"></div> <div class="border-bottom-md"></div> <div class="border-bottom-lg"></div> <div class="border-bottom-xl"></div> <div class="border-start-sm"></div> <div class="border-start-md"></div> <div class="border-start-lg"></div> <div class="border-start-xl"></div> <div class="border-sm-0"></div> <div class="border-md-0"></div> <div class="border-lg-0"></div> <div class="border-xl-0"></div> <div class="border-top-sm-0"></div> <div class="border-top-md-0"></div> <div class="border-top-lg-0"></div> <div class="border-top-xl-0"></div> <div class="border-end-sm-0"></div> <div class="border-end-md-0"></div> <div class="border-end-lg-0"></div> <div class="border-end-xl-0"></div> <div class="border-bottom-sm-0"></div> <div class="border-bottom-md-0"></div> <div class="border-bottom-lg-0"></div> <div class="border-bottom-xl-0"></div> <div class="border-start-sm-0"></div> <div class="border-start-md-0"></div> <div class="border-start-lg-0"></div> <div class="border-start-xl-0"></div>
