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.

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image Example non-rounded image (overrides rounding applied elsewhere) Example pilled image Example top pilled image Example right pilled image Example bottom pilled image Example left pilled image Example top left pilled image Example bottom left pilled image 
            
              <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.