Border Color

vel-src: borders.css

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

Class	Properties
vel-border-primary	border-color: var(--vel-color-primary)
vel-border-secondary	border-color: var(--vel-color-secondary)
vel-border-success	border-color: var(--vel-color-success)
vel-border-danger	border-color: var(--vel-color-danger)
vel-border-warning	border-color: var(--vel-color-warning)
vel-border-info	border-color: var(--vel-color-info)
vel-border-neutral-200	border-color: var(--vel-neutral-200)
vel-border-neutral-400	border-color: var(--vel-neutral-400)
vel-border-neutral-600	border-color: var(--vel-neutral-600)
vel-border-neutral-800	border-color: var(--vel-neutral-800)
vel-border-white	border-color: #ffffff
vel-border-black	border-color: #000000
vel-border-transparent	border-color: transparent

Examples

Semantic border colors

example.html

<div style="display:flex;gap:10px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <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-2 vel-border-solid vel-border-secondary vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-2 vel-border-solid vel-border-success vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-2 vel-border-solid vel-border-danger vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-2 vel-border-solid vel-border-warning vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
  <div class="vel-border-2 vel-border-solid vel-border-info vel-rounded-md" style="width:56px;height:56px;background:#0d1422;"></div>
</div>