Docs / Outline

Outline

vel-src: borders.css

Utilities for controlling the outline of an element.

ClassProperties
vel-outline-noneoutline: none
vel-outlineoutline: 2px solid currentColor
vel-outline-2outline-width: 2px
vel-outline-4outline-width: 4px
vel-outline-offset-0outline-offset: 0px
vel-outline-offset-1outline-offset: 1px
vel-outline-offset-2outline-offset: 2px
vel-outline-offset-4outline-offset: 4px
vel-outline-primaryoutline-color: var(--vel-color-primary)
vel-outline-successoutline-color: var(--vel-color-success)
vel-outline-dangeroutline-color: var(--vel-color-danger)

Examples

Outline with offset

example.html
<div style="display:flex;gap:20px;padding:1.5rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <button class="vel-outline vel-outline-primary vel-outline-offset-2 vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Primary</button>
  <button class="vel-outline vel-outline-success vel-outline-offset-2 vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Success</button>
  <button class="vel-outline vel-outline-danger vel-outline-offset-2 vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#e2e8f0;border:none;cursor:pointer;">Danger</button>
  <button class="vel-outline-none vel-rounded-md" style="padding:8px 16px;background:#0d1422;color:#64748b;border:none;cursor:pointer;">No outline</button>
</div>