Borders 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Apply border width/style/color and radius utilities for dividers and frames.
Prefer --velin-radius-* / border color tokens for themeability.

When not

Do not mix unprefixed Bootstrap border classes with velin-* on the same control.

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>

All sides

Top only

End (right in LTR)

Bottom only

Start (left in LTR)

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>

No top border

No end border

No borders

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>

Primary

Success

Danger

Warning

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>

1px

2px

3px

5px

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>

Default radius

No radius

Small

Medium

Large

Extra large

Circle

Pill

Top corners

End corners

Bottom corners

Start corners