Border

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>

Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?