Hit enter after type your search item

7 Examples to Learn Using Bootstrap 5 Borders Utilities

What are Bootstrap 5 Border utilities?

To quickly style the border and border-radius of different elements, you may use the Bootstrap 5 border utilities.

Border utilities are great for:

  • Buttons
  • Images
  • And any other element

Quick Demos Online

Addictive borders
Subtractive borders
Colorize borders
Setting the border width
border-radius with images

An example of Bootstrap borders for a paragraph – Addictive borders

You may apply all borders to any elements or one/two border(s) at a time. The example below applies border to five paragraphs:

  • Borders in all directions
  • Border on top
  • Border on right
  • On bottom
  • And on left only
See online demo and code


An example of subtractive borders

Substantive border means the one you specify is subtracted while all others are applied. For example, if you use border-top-0 class, it will omit the top border and apply the border in all other three directions.

See online demo and code


Applying colors to border example

By using contextual color classes, you may apply borders with colors easily. An example below shows various available classes for colors and their usage with borders. Have a look:

See online demo and code


Following color border classes are available in BS 5 that you may use along with the main .border class:
  • border-primary
  • border-secondary
  • border-success
  • border-danger
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white

Setting the border width example

Bootstrap 5 also has classes for setting the border width easily. Simply add the border-1, border-2 to border-5. classes to the main .border class and it will set the border width.

See an example where we set the border of paragraph element from 1 to 5 (available classes):

See online demo and code


Setting the border-radius example

For rounding the corners, creating circles for elements like span, paragraph, images, etc. you may use the classes related to border-radius.

  • rounded
  • rounded-top
  • rounded-end
  • rounded-bottom
  • rounded-start
  • rounded-circle
  • rounded-pill
See online demo and code


An example of border-radius with images

See an example below of border-radius classes with images.

See online demo and code


Using size classes for large/small corners example

See online demo and code


Following scaling classes are available for smaller and larger round corners:
  • rounded-0
  • rounded-1
  • rounded-2
  • rounded-3


This div height required for enabling the sticky sidebar