企業ロゴスライダーのCSS HTMLを利用した実装で、画像の黒い枠線が消えない

実現したいこと

こんにちは、HTML CSSの超初心者です…。
ワードプレスに「企業ロゴのスライダー」を実装したく、
ネット上から以下を引用し試しています。

なおテンプレートはDiviを使っており、
今回はDivi上の「コード設定」から上記コードを入力しています。

困っているのが、「画像の枠線が出てしまう点」です。（添付画像参照）
企業ロゴを「背景白画像」にして入れて見ましたが、
それぞれのロゴに黒い枠線がついてしまいます。

スライドを
background: #ffffff;
border="0" ;
にしてみましたが、添付の状態から変わりません。

どうかご指南の程よろしくお願いいたします…

ーーーーーーーー（下記コード記載）ーーーーーーーーーーーーーーーーーー

<div class="row"> <h3>スライダー</h3> <div class="autoplay-slider"> <div class="slide"><span>1</span></div> <div class="slide"><span>2</span></div> <div class="slide"><span>3</span></div> <div class="slide"><span>4</span></div> <div class="slide"><span>5</span></div> <div class="slide"><span>6</span></div> <div class="slide"><span>1</span></div> <div class="slide"><span>2</span></div> <div class="slide"><span>3</span></div> <div class="slide"><span>4</span></div> <div class="slide"><span>5</span></div> <div class="slide"><span>6</span></div> </div> </div> <style> .autoplay-slider{ display: flex; width: 100%; } .row{ display: -ms-grid; -ms-grid-columns: min-content; } .slide{ height: 200px; width: 400px; background: #ffffff; border="0" ; margin: 20px; position: relative; } @keyframes sliderAnimation { 100% { transform: translateX(-50%); } } .autoplay-slider{ display: flex; min-width: 100%; width: min-content; animation: 20s linear infinite sliderAnimation; } </style>