Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border-radius
Add classes to an element to easily round its corners.
<img class="rounded" src="..." alt="...">
<img class="rounded-top" src="..." alt="...">
<img class="rounded-right" src="..." alt="...">
<img class="rounded-bottom" src="..." alt="...">
<img class="rounded-left" src="..." alt="...">
<img class="rounded-circle" src="..." alt="...">
<img class="rounded-0" src="..." alt="...">
<img class="rounded-pill" src="..." alt="...">
<img class="rounded-top-pill" src="..." alt="...">
<img class="rounded-right-pill" src="..." alt="...">
<img class="rounded-bottom-pill" src="..." alt="...">
<img class="rounded-left-pill" src="..." alt="...">
<img class="rounded-top-left-pill" src="..." alt="...">
<img class="rounded-bottom-left-pill" src="..." alt="...">
<div class="u-bg-img-hero u-gradient-overlay-half-primary-v1 rounded-pseudo mb-1" style="background-image: url(../../assets/img/900x450/img1.jpg);"></div>
<div class="u-bg-img-hero u-gradient-overlay-half-primary-v1 rounded-top-pseudo mb-1" style="background-image: url(../../assets/img/900x450/img1.jpg);"></div>
Note
.rounded-pseudo
and .rounded-top-pseudo
border radius classes used on images that are overlayed with background gradients.