a borda cinza do

código do html

<main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                <img src="cabelo.jpg">
                    <p class="descricaoProduto">Na tesoura ou máquina, como o cliente preferir</p>
                    <p class="precoDoProduto">R$25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                <img src="barba.jpg">
                    <p class="descricaoProduto">Corte e desenho profissional de barba</p>
                    <p class="precoDoProduto">R$18,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                <img src="cabelo+barba.jpg">
                    <p class="descricaoProduto">Pacote completo de cabelo e barba</p>
                    <p class="precoDoProduto">R$35,00</p>
                <li>
            </ul>
        </main>

código do css

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
width: 940px;
position: relative;
margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}


nav li{
    display: inline;
    margin: 0 0 15px 15px;  
}
nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 30px;
    text-decoration: none ;
}
.produtos{
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;

}

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    background: #CCCCCC;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;

}
.produtos h2{
    font-style: 30px;
    font-weight: bold;
}
.descricaoProduto{
    font-size: 18px;
    font-weight: bold;
}

.precoDoProduto {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 0;
}