Bootstrap 5 border-color doesn't work for responsive border-start/end/top/bottom

Question

What I want to achieve:

For mobile: only border top/bottom, For desktop: only border start/end, in border-dark color.

What I've tried:

added custom responsive borders to main.scss

// responsive borders

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  
      .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
      .border#{$infix}-end {    border-right: $border-width solid $border-color !important; }
      .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
      .border#{$infix}-start {     border-left: $border-width solid $border-color !important; }
  
      .border#{$infix}-top-0 {    border-top: 0 !important; }
      .border#{$infix}-end-0 {  border-right: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
      .border#{$infix}-start-0 {   border-left: 0 !important; }
  
      .border#{$infix}-x {
        border-left: $border-width solid $border-color !important;
        border-right: $border-width solid $border-color !important;
      }
  
      .border#{$infix}-y {
        border-top: $border-width solid $border-color !important;
        border-bottom: $border-width solid $border-color !important;
      }
    }
  }

in html:

<div class="col-sm-4 d-flex justify-content-center justify-content-sm-center border border-dark border-start-0 border-end-0 border-md-start border-md-end border-md-top-0 border-md-bottom-0 overflow-hidden"></div>

The problem is borders start/end on desktop appears in default 1px solid #dee2e6 !important bootstrap color

Answer 1

I think you need to specifically set border-{side}-width and border-style instead of the shorthand. Otherwise the color in the shorthand used by Bootstrap's .border: {1px solid #dee2e6 !important;} will override it.

   @include media-breakpoint-up($breakpoint) {    
      .border#{$infix}-top { border-top-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-end { border-right-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-bottom { border-bottom-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-start { border-left-width: $border-width !important; border-style: solid !important; }
      
      .border#{$infix}-top-0 { border-top-width: 0 !important; }
      .border#{$infix}-end-0 { border-right-width: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom-width: 0 !important; }
      .border#{$infix}-start-0 { border-left-width: 0 !important; }
   }

SASS demo