How do i change individual border colors in bootstrap 5?

Question

<div class="m-3 p-3 border-5 border-top border-danger border-bottom border-primary">
  Border with different colors?
</div>

Is there a way to accomplish this maybe using sass?

Answer 1

Yes in SCSS you should use BOM approch so you can write like this:

<div class="border border-top border-bottom">

Border with different colors?

Now scss:

.border { &-bottom { border-bottom-color: red } &-top { border-top-color: green } }