Docs / Border Radius

Border Radius

vel-src: borders.css

Utilities for controlling the border radius of an element.

ClassProperties
vel-rounded-noneborder-radius: 0
vel-rounded-smborder-radius: 0.125rem
vel-roundedborder-radius: 0.25rem
vel-rounded-mdborder-radius: 0.375rem
vel-rounded-lgborder-radius: 0.5rem
vel-rounded-xlborder-radius: 0.75rem
vel-rounded-2xlborder-radius: 1rem
vel-rounded-3xlborder-radius: 1.5rem
vel-rounded-fullborder-radius: 9999px
vel-rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem
vel-rounded-r-lgborder-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem
vel-rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem
vel-rounded-l-lgborder-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem
vel-rounded-tl-lgborder-top-left-radius: 0.5rem
vel-rounded-tr-lgborder-top-right-radius: 0.5rem
vel-rounded-br-lgborder-bottom-right-radius: 0.5rem
vel-rounded-bl-lgborder-bottom-left-radius: 0.5rem

Examples

Border radius scale

example.html
<div style="display:flex;gap:10px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div class="vel-bg-primary vel-rounded-none" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-sm" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-lg" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-xl" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-2xl" style="width:52px;height:52px;"></div>
  <div class="vel-bg-primary vel-rounded-full" style="width:52px;height:52px;"></div>
</div>