Utilities: Borders & Dividers

Border Width

border-0 border-1 border-2 border-3 border-4 border-5

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-p-2 lp-border-0">border-0</span>
    <span class="lp-demo-box lp-p-2 lp-border-1">border-1</span>
    <span class="lp-demo-box lp-p-2 lp-border-2">border-2</span>
    <span class="lp-demo-box lp-p-2 lp-border-3">border-3</span>
    <span class="lp-demo-box lp-p-2 lp-border-4">border-4</span>
    <span class="lp-demo-box lp-p-2 lp-border-5">border-5</span>
</div>

Border Style

solid dashed dotted double

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-p-2 lp-border-2 lp-border-solid">solid</span>
    <span class="lp-demo-box lp-p-2 lp-border-2 lp-border-dashed">dashed</span>
    <span class="lp-demo-box lp-p-2 lp-border-2 lp-border-dotted">dotted</span>
    <span class="lp-demo-box lp-p-2 lp-border-4 lp-border-double">double</span>
</div>

Border Radius

none sm md lg xl 2xl full pill shape

<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-items-center">
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-none">none</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-sm">sm</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded">md</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-lg">lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-xl">xl</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-2xl">2xl</span>
    <span class="lp-demo-box lp-d-inline-flex lp-items-center lp-justify-center lp-wf-16 lp-hf-16 lp-rounded-full">full</span>
    <span class="lp-demo-box lp-demo-box--pill lp-px-4 lp-rounded-pill">pill shape</span>
</div>

Directional Radius

rounded-t-lg rounded-b-lg rounded-l-lg rounded-r-lg rounded-tl-lg rounded-br-lg

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-t-lg">rounded-t-lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-b-lg">rounded-b-lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-l-lg">rounded-l-lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-r-lg">rounded-r-lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-tl-lg">rounded-tl-lg</span>
    <span class="lp-demo-box lp-demo-box--pill lp-rounded-br-lg">rounded-br-lg</span>
</div>

Horizontal Separator

Above

Below

Thick primary

Dashed

<div class="lp-mb-2">Above</div>
<hr class="lp-separator">
<div class="lp-mb-2">Below</div>
<hr class="lp-separator lp-separator-2 lp-separator-primary">
<div class="lp-mb-2">Thick primary</div>
<hr class="lp-separator lp-separator-dashed">
<div>Dashed</div>

Separator with Text

OR

Section Title

<div class="lp-separator-text">OR</div>
<div class="lp-separator-text lp-mt-3"><span>Section Title</span></div>

Vertical Separator

First Second Third

<div class="lp-d-flex lp-items-center lp-gap-3">
    <span>First</span>
    <span class="lp-separator-vertical"></span>
    <span>Second</span>
    <span class="lp-separator-vertical lp-separator-primary"></span>
    <span>Third</span>
</div>

Divide Between Children

First row

Second row

Third row

<div class="lp-divide-y lp-border lp-rounded lp-max-w-md">
    <div class="lp-p-3">First row</div>
    <div class="lp-p-3">Second row</div>
    <div class="lp-p-3">Third row</div>
</div>

CSS Reference

Class	Description
`.lp-border-{0\|1\|2\|3\|4\|5\|8}`	Border width
`.lp-border-{solid\|dashed\|dotted\|double\|none}`	Border style
`.lp-border-{color}`	Border color (8 semantic)
`.lp-rounded-{none\|sm\|md\|lg\|xl\|2xl\|3xl\|full\|pill}`	Border radius
`.lp-rounded-{t\|r\|b\|l}-{size}`	Side-specific radius
`.lp-rounded-{tl\|tr\|br\|bl}-{size}`	Corner-specific radius
`.lp-separator`	Horizontal divider line
`.lp-separator-vertical`	Vertical divider
`.lp-separator-{1\|2\|3\|4}`	Separator thickness
`.lp-separator-{dashed\|dotted}`	Separator style
`.lp-separator-{color}`	Separator color
`.lp-separator-text`	Separator with inline text
`.lp-divide-{x\|y}`	Border between siblings
`.lp-divide-{color}`	Divide color