EduAdmin - Dashboard Border Class Utilities

Border Width

Class	Properties
border-0	border-width: 0px;
border-2	border-width: 2px;
border-4	border-width: 4px;
border-8	border-width: 8px;
border	border-width: 1px;
border-x-0	border-left-width: 0px; border-right-width: 0px;
border-x-2	border-left-width: 2px; border-right-width: 2px;
border-x-4	border-left-width: 4px; border-right-width: 4px;
border-x-8	border-left-width: 8px; border-right-width: 8px;
border-x	border-left-width: 1px; border-right-width: 1px;
border-y-0	border-top-width: 0px; border-bottom-width: 0px;
border-y-2	border-top-width: 2px; border-bottom-width: 2px;
border-y-4	border-top-width: 4px; border-bottom-width: 4px;
border-y-8	border-top-width: 8px; border-bottom-width: 8px;
border-y	border-top-width: 1px; border-bottom-width: 1px;
border-s-0	border-inline-start-width: 0px;
border-s-2	border-inline-start-width: 2px;
border-s-4	border-inline-start-width: 4px;
border-s-8	border-inline-start-width: 8px;
border-s	border-inline-start-width: 1px;
border-e-0	border-inline-end-width: 0px;
border-e-2	border-inline-end-width: 2px;
border-e-4	border-inline-end-width: 4px;
border-e-8	border-inline-end-width: 8px;
border-e	border-inline-end-width: 1px;
border-t-0	border-top-width: 0px;
border-t-2	border-top-width: 2px;
border-t-4	border-top-width: 4px;
border-t-8	border-top-width: 8px;
border-t	border-top-width: 1px;
border-r-0	border-right-width: 0px;
border-r-2	border-right-width: 2px;
border-r-4	border-right-width: 4px;
border-r-8	border-right-width: 8px;
border-r	border-right-width: 1px;
border-b-0	border-bottom-width: 0px;
border-b-2	border-bottom-width: 2px;
border-b-4	border-bottom-width: 4px;
border-b-8	border-bottom-width: 8px;
border-b	border-bottom-width: 1px;
border-l-0	border-left-width: 0px;
border-l-2	border-left-width: 2px;
border-l-4	border-left-width: 4px;
border-l-8	border-left-width: 8px;
border-l	border-left-width: 1px;

Following table demonstrates available classes for 1px border.

Class name

Description

.bt-1

border-top: 1px solid ...

.bb-1

border-bottom: 1px solid ...

.bs-1

border-left: 1px solid ...

.be-1

border-right: 1px solid ...

.bx-1

border-left: 1px solid ...
border-right: 1px solid ...

.by-1

border-top: 1px solid ...
border-bottom: 1px solid ...

.b-1

border: 1px solid ...

You can add solid borders to an element using following classes. You're able to change the border color using border color utility classes.

The classes follows b{side}-{size} format, where {size} is one of 0, 1, 2, 3, 4, or 5 values. Also, {side} is one of:

t : Border top
b : Border bottom
s : Border left
e : Border right
x : Border left and right
y : Border top and bottom
null: All sides

<div class="b-dashed"></div>

<div class="b-dotted"></div>

<div class="b-double"></div>

<div class="b-groove"></div>

<div class="b-solid"></div>

<div class="b-1"></div>

<div class="bx-2"></div>

<div class="by-3"></div>

<div class="bs-3 border-primary"></div>

<div class="be-2 border-success"></div>

<div class="bt-1 border-danger"></div>

<div class="bb-1 border-info"></div>