Borders

Utilities for controlling border width, color, radius, and decorative shadows on any element.

Additive Borders

Add borders to any element:

<div class="velin-border">All sides</div>
<div class="velin-border-top">Top only</div>
<div class="velin-border-end">End (right in LTR)</div>
<div class="velin-border-bottom">Bottom only</div>
<div class="velin-border-start">Start (left in LTR)</div>

Subtractive Borders

Remove borders selectively:

<div class="velin-border velin-border-top-0">No top border</div>
<div class="velin-border velin-border-end-0">No end border</div>
<div class="velin-border-0">No borders</div>

Border Color

Set the border color using theme tokens:

<div class="velin-border velin-border-primary">Primary</div>
<div class="velin-border velin-border-success">Success</div>
<div class="velin-border velin-border-danger">Danger</div>
<div class="velin-border velin-border-warning">Warning</div>

Border Width

Control border thickness with .velin-border-{1|2|3|4|5}:

<div class="velin-border velin-border-1">1px</div>
<div class="velin-border velin-border-2">2px</div>
<div class="velin-border velin-border-3">3px</div>
<div class="velin-border velin-border-5">5px</div>

Border Radius

Round corners with radius utilities:

<div class="velin-rounded">Default radius</div>
<div class="velin-rounded-0">No radius</div>
<div class="velin-rounded-1">Small</div>
<div class="velin-rounded-2">Medium</div>
<div class="velin-rounded-3">Large</div>
<div class="velin-rounded-4">Extra large</div>
<div class="velin-rounded-circle">Circle</div>
<div class="velin-rounded-pill">Pill</div>

<!-- Directional -->
<div class="velin-rounded-top">Top corners</div>
<div class="velin-rounded-end">End corners</div>
<div class="velin-rounded-bottom">Bottom corners</div>
<div class="velin-rounded-start">Start corners</div>