No slider da imagem dos botões, existem uma quebra da borda...como resolver isso? | jQuery: avance na biblioteca mais popular do mercado parte 2

Ao abrir no Chrome somente a borda do slide do botão quebra, contudo no Firefox a quebra lateral acontece em todas as imagens do slide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <!--Import materialize.css-->
    <link rel="stylesheet" href="css/libs/materialize.min.css"/>
    <!-- Import Google Material Icons -->
    <link href="css/libs/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link href="css/index.css" rel="stylesheet"/>
</head>
<body>
    <section class="container">
        <h1 class="center titulo header">Alura typer</h1>
        <div class="slider">
            <img src="img/slide1.png" class="imagem-jogo">
            <img src="img/slide2.png" class="imagem-jogo">
            <img src="img/slide3.png" class="imagem-jogo">
        </div>
        <hr>
        <p class="flow-text center">Teste sua velocidade competindo contra seus amigos!</p>
        <div class="card">
           <div class="card-image">
             <!-- <img src="images/sample-1.jpg"> -->
           </div>
           <div class="card-content">
             <p>Placar dinâmico! Sincronizando com o servidor!</p>
           </div>
           <div class="card-action">
             <a href="principal.html">Experimente agora!</a>
           </div>
         </div>
         <div class="card">
           <div class="card-image">
             <!-- <img src="img/sl.jpg"> -->
           </div>
           <div class="card-content">
             <p>Frases aleatórias ou escolha diretamente em qual delas você quer competir!</p>
           </div>
           <div class="card-action">
             <a href="principal.html">Experimente agora!</a>
           </div>
         </div>

         <a class="waves-effect waves-light btn-large orange" id="botao-jogue" href="principal.html">Jogue agora!</a>

    </section>

    <script src="js/jquery.js"></script>
    <script src="slick/slick.min.js"></script>
    <script src="js/slider.js"></script>


</body>
</html>

.card {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}


#botao-jogue{
    width: 150px;
    display: block;
    margin: 50px auto;
}

.imagem-jogo {
    border: 1px solid gray;
}


.slider {
    height: auto; /* faz com que no slider as imagens ocupem sua altura*/
}

.slick-prev:before, .slick-next:before {
    color: black;  /*retira a cor padrão da seta*/
}

Mergulhe em programação