Borders
Vue Bootstrap 5 Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Basic examples
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
<template>
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
</template>
Subtractive
<template>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
</template>
Color
Change the border color using utilities built on our theme colors.
<template>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</template>
Border-width
Change the border width.
<template>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
</template>
Border-radius
Add classes to an element to easily round its corners.
<template>
<img src="" class="rounded" alt="..." />
<img src="" class="rounded-top" alt="..." />
<img src="" class="rounded-end" alt="..." />
<img src="" class="rounded-bottom" alt="..." />
<img src="" class="rounded-start" alt="..." />
<img src="" class="rounded-circle" alt="..." />
<img src="" class="rounded-pill" alt="..." />
<img src="" class="rounded-0" alt="..." />
</template>
Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API.
<template>
<img src="" class="rounded-0" alt="..." />
<img src="" class="rounded-1" alt="..." />
<img src="" class="rounded-2" alt="..." />
<img src="" class="rounded-3" alt="..." />
<img src="" class="rounded-4" alt="..." />
<img src="" class="rounded-5" alt="..." />
<img src="" class="rounded-6" alt="..." />
<img src="" class="rounded-7" alt="..." />
<img src="" class="rounded-8" alt="..." />
<img src="" class="rounded-9" alt="..." />
</template>