Border Width

vel-src: borders.css

Utilities for controlling the width of an element's borders.

Class	Properties
vel-border-0	border-width: 0
vel-border	border-width: 1px
vel-border-2	border-width: 2px
vel-border-4	border-width: 4px
vel-border-8	border-width: 8px
vel-border-t	border-top-width: 1px
vel-border-r	border-right-width: 1px
vel-border-b	border-bottom-width: 1px
vel-border-l	border-left-width: 1px
vel-border-t-2	border-top-width: 2px
vel-border-b-4	border-bottom-width: 4px

Examples

Border width scale

example.html

<div style="display:flex;gap:10px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div class="vel-border vel-border-solid vel-border-primary vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-2 vel-border-solid vel-border-primary vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-4 vel-border-solid vel-border-primary vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-8 vel-border-solid vel-border-primary vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
</div>

Directional borders

example.html

<div style="display:flex;gap:10px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div class="vel-border-t-2 vel-border-solid vel-border-primary" style="width:56px;height:56px;background:#0d1422;border-radius:4px;"></div>
  <div class="vel-border-r-2 vel-border-solid vel-border-success" style="width:56px;height:56px;background:#0d1422;border-radius:4px;"></div>
  <div class="vel-border-b-2 vel-border-solid vel-border-warning" style="width:56px;height:56px;background:#0d1422;border-radius:4px;"></div>
  <div class="vel-border-l-2 vel-border-solid vel-border-danger" style="width:56px;height:56px;background:#0d1422;border-radius:4px;"></div>
</div>