Borders

Frame your content with style

Border Color Utilities

Border 1

Border 2

Border 3

Border 4

Border 5

Border Success

Border Danger

Border Warning

Border Primary

Border CTA

Border Secondary

Border Accent

Border Radius Utilities

Border Radius - small

Border Radius - medium

Border Radius - large

Border Radius - xl

Border Radius - xxl

No bottom border radius

No top border radius

No right border radius

No left border radius

Code Example

<div class="border-1">Border 1</div>
<div class="border-2">Border 2</div>
<div class="border-3">Border 3</div>
<div class="border-4">Border 4</div>
<div class="border-5">Border 5</div>

<div class="border-danger">Border Danger</div>
<div class="border-warning">Border Warning</div>
<div class="border-primary">Border Primary</div>
<div class="border-cta">Border CTA</div>
<div class="border-secondary">Border Secondary</div>
<div class="border-accent">Border Accent</div>

<z-col class="br-sm border-4">Border Radius - small</z-col>
<z-col class="br-md border-4">Border Radius - medium</z-col>
<z-col class="br-lg border-4">Border Radius - large</z-col>
<z-col class="br-xl border-4">Border Radius - xl</z-col>
<z-col class="br-xxl border-4">Border Radius - xxl</z-col>

<z-col class="br-top-0 br-lg border-4">No top border radius</z-col>
<z-col class="br-bottom-0 br-lg border-4">No bottom border radius</z-col>
<z-col class="br-right-0 br-lg border-4">No right border radius</z-col>
<z-col class="br-left-0 br-lg border-4">No left border radius</z-col>

Additional Border Utilities

Border bottom

Border Sides (switches to border bottom on tablet/mobile)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus dicta error animi quod eius, ex perspiciatis magnam quas quia quae a, assumenda ducimus ipsa reprehenderit voluptate incidunt fuga est.

Code Example

<z-col class="border-bottom">Lorem ipsum dolor...</z-col>

<z-col class="card border-right">Lorem ipsum dolor...</z-col>
<z-col class="card border-right">Lorem ipsum dolor...</z-col>
<z-col class="card">Lorem ipsum dolor...</z-col>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.