Bootstrap Borders

Borders are a popular styling element in web applications. They can be controlled for their colors, shapes, and appearance based on the developer’s style requirements.

Bootstrap has a lot of utility classes that can help you manage the borders around different elements on the web-page.

But before we get into that, let’s have look at the CSS borders to get a recapitulation of how the border property worked and what different values we could give to it.

CSS Borders

In CSS, the basic borders were controlled using the following properties:

  • border: Basic border class to set all the border properties in one goe
  • border-bottom: All the properties for bottom border
  • border-color: Color of all the four borders
  • border-left: All the properties for left border
  • border-radius: Radius for all the four borders
  • border-right: All the properties for right border
  • border-style: Style for all the four borders
  • border-top: All the properties for the top border
  • border-width: Width for all the four borders

There are other properties as well that can be used to style specific features for specific borders, but a little knowledge of the above ones will suffice in understanding the various Bootstrap features related to Borders.

Basic Bootstrap Border

As we know, Bootstrap has classes instead of properties to control the different features of the element.

Here, also we have the corresponding classes for the CSS properties we read before.

For example, here you can choose all the four borders using the .border class (just like the border property in CSS). The code snippet below will illustrate the use of all the basic border-* classes:

Subtractive

The example you saw above shows the additive classes. This means that using each of these classes will add the specific (or multiple) borders. However using the border-*-0 classes will do the opposite and remove the respective borders.

Therefore, if you’re using the border-0 class, it will remove all the four borders while using the border-top-0 class remove only the top border.

See the code below for better explanation:

Border color

As we have seen in multiple occasions, Bootstrap has special utility classes for default colors indicating different status of the element.

Similarly, for borders too Bootstrap has the following contextual classes:

  • border-primary
  • border-secondary
  • border-success
  • border-danger
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white

You can observe using the code below, how these classes provide different colors to the borders.

Border-radius

Following classes can be used for rounded borders with different radius:

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

As you can guess, these classes can give rounded borders in different directions. Check the code below to understand their usage better.