Cannot remove white border around bxSlider

Question

I am trying to get rid of the white border around a box slider. It displays a 5px white solid border. I tried border:0 !important in css and outline:0 in the js. I tried box-sizing:border-box. And i tried box-shadow:none. The result is a 5px white border around bxSlider

CSS

#wrapper {
    width: auto;
    margin: 70px 0px;
    padding: 0px;
    background-color: #d8d2d2;
}

a.slide {
    width: 100%;
}

#bxSlider {
    background-color: #d8d2d2;
    border:0 !important;
}

JS

`$('.bxSlider').bxSlider({
    mode: 'vertical',
  speed: 500,
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: '<i class="fa fa-angle-right" style="color:black; font-size:42px"/> </i>',  
  prevText: '<i class="fa fa-angle-left" style="color:black; font-size:42px"/> &nbsp; </i>',    
  slideMargin: 0,
  infiniteLoop: true,
  pager: false,
  outline: 0,  
  minSlides: 3,
  maxSlides:3,
  moveSlides: 3,
  adaptiveHeight: false,
  slideSelector: 'a.slide'
});`

Answer 1

Have you tried :

.bx-wrapper {
    border:0 !important;
}

Cause it looks like the border is applied on the wrapper and not on the slidder

Answer 2

You can try adding a parent class to the #bxSlider element and use that in your CSS:

    #wrapper {
      /* existing code */
    }
    .slider-container #bxSlider {
      border: 0 !important;
}