Estilos não não aparecem na página

Bom dia! Ao acrescentar os estilos botao-cor-especial" background-color: darkred;" , o botão continua azul. Ao tirar o "btn-primary" o botão fica branco. E ao acrescentar o estilo "borda-cor-especial", nada acontece.

HTML
<div class="card borda-cor-especial" style="width: 18rem;">
  <img src="src/img/receita-abacate.jpg" class="card-img-top" alt="tigela com salada de abacate, vista superior">
    <div class="card-body">
      <h5 class="card-title">Tigela de abacate</h5>
      <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
      <a href="#" class="btn botao-cor-especial">Veja a receita</a>
    </div>
  </div>

CSS

.botao-cor-especial {
    background-color: darkred;
    color: white;
}

.borda-cor-especial {
    border-color: darkred;   
}