Bootstrap Utilities: Borders

The border helper classes allow, as their name implies, setting an element’s border properties. Specifically, utility classes allow for the quick setting of border, border-top, border-bottom, border-left, border-right, and border-color. Border helper classes also allow rounding borders through setting the border-radius properties.

First and foremost, to create a solid 1 px border around an element, use the border class. Similarly, to remove the border around an element, use the border-0 class. To clear the top, bottom, left, or right borders, use the border-top-0, border-bottom-0, border-left-0, and border-right-0 classes respectively. Bootstrap defines these classes as follows:

.border {

border:  1px solid #dee2e6 !important;

} .border-0 {

border: 0 !important;


.border-top-0 {

border-top: 0 !important;


.border-right-0 {

border-right: 0 !important;


.border-bottom-0 {

border-bottom:  0 !important;

} .border-left-0 {

border-left:  0 [important;


To round the border around an element, use the rounded class. To only round specific sides, use the following (refer to Figure 8.2):

  • rounded-top
  • rounded-bottom
  • rounded-left
  • rounded-right

Note that the rounded-* classes must be used in conjunction with the border-* classes:

Figure 8.2: Using the border and rounded-* utility class to force borders and the rounding of borders

The border-color property of an element can be set to one of the nine context colors on offer by Bootstrap 4 using the border-<context color> helper classes, whereby <context- color> refers to primary (#007bff), secondary (#868e96), success (#28a745), info (#17a2b8), warning (#ffc107), danger (#dc3545), light (#f8f9fa), dark (#343a40), or white (#fff).

Figure 8.3: Using the border, rounded, and border context color utility classes to create colored, rounded borders for elements

Last but not least, we can render a circular element using the rounded-circle class, or we can reset the border-radius using the rounded-0 class. The two classes are defined as follows:

.rounded-circle {

border-radius: 50% [important;


.rounded-0 {

border-radius:  0 [important;


Figure 8.4: Using the rounded-circle class to create a circular element by setting the border-radius to 50%

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Leave a Reply

Your email address will not be published. Required fields are marked *