Border Style

vel-src: borders.css

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

Class	Properties
vel-border-solid	border-style: solid
vel-border-dashed	border-style: dashed
vel-border-dotted	border-style: dotted
vel-border-double	border-style: double
vel-border-none	border-style: none

Examples

Border style variants

solid

dashed

dotted

double

example.html

<div style="display:flex;gap:10px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div class="vel-border-2 vel-border-solid vel-border-primary vel-rounded-md" style="width:70px;height:56px;background:#0d1422;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.7rem;">solid</div>
  <div class="vel-border-2 vel-border-dashed vel-border-primary vel-rounded-md" style="width:70px;height:56px;background:#0d1422;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.7rem;">dashed</div>
  <div class="vel-border-2 vel-border-dotted vel-border-primary vel-rounded-md" style="width:70px;height:56px;background:#0d1422;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.7rem;">dotted</div>
  <div class="vel-border-4 vel-border-double vel-border-primary vel-rounded-md" style="width:70px;height:56px;background:#0d1422;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.7rem;">double</div>
</div>