Borders

Utilities for controlling borders.

Border

Use border utilities to apply border and border radius. .border apply border width to the element.

<span class="border bd-default"></span>
<span class="border bd-black"></span>
<span class="border bd-primary"></span>
<span class="border bd-secondary"></span>

Border width

Use border utilities to apply border and border radius.

Class	Properties
`border-0`	0px
`border`	1px
`border-2`	2px - 0.125rem
`border-4`	4px - 0.25rem
`border-6`	6px - 0.375rem
`border-8`	8px - 0.5rem
`border-10`	10px - 0.625rem

border

border-2

border-4

border-6

<span class="border bd-secondary"></span>
<span class="border-2 bd-secondary"></span>
<span class="border-4 bd-secondary"></span>
<span class="border-6 bd-secondary"></span>

Individual sides

Borders can be applied to individual sides.
Use .border-{side}-{width} to apply border to particular side.

border-t-4

border-r-4

border-b-4

border-l-4

<span class="border-t-4 bd-secondary"></span>
<span class="border-r-4 bd-secondary"></span>
<span class="border-b-4 bd-secondary"></span>
<span class="border-l-4 bd-secondary"></span>

Horizontal and Vertical sides

Use .border-{x|y}-{width} to apply border on horizontal or vertical side.

border-x-4

border-y-4

<span class="border-x-4 bd-secondary"></span>
<span class="border-y-4 bd-secondary"></span>

Border radius

Use .rounded to add border-radius.

Class	Properties
`rounded-none`	0
`rounded`	6px
`rounded-sm`	4px
`rounded-md`	12px
`rounded-lg`	24px
`rounded-full`	999rem
`rounded-circle`	50%

rounded

rounded-md

rounded-lg

rounded-full

<span class="rounded"></span>
<span class="rounded-md"></span>
<span class="rounded-lg"></span>
<span class="rounded-full"></span>

Rounding Individual side

Use .rounded-{side}-{size} to apply rounded to particular side.

rounded-t-md

rounded-r-md

rounded-b-md

rounded-l-md

<span class="rounded-t-md"></span>
<span class="rounded-r-md"></span>
<span class="rounded-b-md"></span>
<span class="rounded-l-md"></span>

Rounding Individual corner

Use .rounded-{corner}-{size} to apply rounded to particular corner.

rounded-tl-md

rounded-tr-md

rounded-bl-md

rounded-br-md

<span class="rounded-tl-md"></span>
<span class="rounded-tr-md"></span>
<span class="rounded-bl-md"></span>
<span class="rounded-br-md"></span>

Border color

For border color see colors utilities.

SASS

Override the sass variables and maps in your scss file.

Border width

	$border-width: (
	"0": 0,
	null: 1px,
	"2": 0.125rem,
	"4": 0.25rem,
	"6": 0.375rem,
	"8": 0.5rem,
	"10": 0.625rem,
);

Border radius

	$border-radius-default: 6px;
	$border-radius-sm: 4px;
	$border-radius-md: 12px;
	$border-radius-lg: 24px;
	$border-radius-full: 999rem;
	$border-radius-circle: 50%;
	$border-radius-none: 0;