Você já deve ter reparado que muitas interfaces têm apresentado elementos com cantos muito arredondados. Quer alguns exemplos? Veja o conteúdo que aparece no Behance, no Dribbble e no Abduzeedo. É uma excelente opção para melhorar o estilo do seu projeto.

Caso não queria fazer tudo do zero e prefira usar frameworks para ajudar na tarefa, a dica é usar o Bootstrap. Nele já existem alguns tipos de bordas com algumas opções, como cores e tamanhos. Sendo também possível implementar seu próprio estilo de borda juntamente com as opções disponibilizadas.

Veja como é o código de um card no Bootstrap:

<div class="card bg-info text-white">
   <div class="card-body">
     <h5 class="card-title">Título do card.</h5>
     <p class="card-text">Texto do card.</p>
     <a href="#" class="btn btn-primary">botão</a>
   </div>
</div> 

Isso gera o card a seguir.

Para aplicar bordas mais arredondadas, basta inserir o seguinte trecho de código: style=”border-radius: 25px;”. Claro que é só uma das formas de se fazer. Uma forma mais adequada seria criar uma classe com o estilo da borda desejada em seu arquivo de estilos (CSS).

Dessa forma, apenas inserindo o trecho de código citado, você deve ficar com algo assim:

<div class="card bg-info text-white" style="border-radius: 25px;">
  <div class="card-body">
    <h5 class="card-title">Título do card.</h5>
    <p class="card-text">Texto do card.</p>
    <a href="#" class="btn btn-primary">botão</a>
  </div>
</div>

Veja o resultado a seguir.

Legal, né? Outras propriedades do Bootstrap que combinam bem com essas bordas muito arredondadas e os cards são as de margin (m) ou padding (p) negativos. Veja um exemplo no código abaixo e logo a seguir o resultado.

<div class="card bg-light pb-4" style="border-radius: 25px;">
  <div class="card-body">
    <h5 class="card-title">Título do card.</h5>
  </div>
</div>
<div class="card bg-info text-white mt-n5 m-3" style="border-radius: 25px;">
  <div class="card-body">
    <h5 class="card-title">Título do card.</h5>
    <p class="card-text">Texto do card.</p>
    <a href="#" class="btn btn-success">botão</a>
  </div>
</div>

Usando o trecho mt-n5, já estamos deixando o margin do topo (top) do card negativo em 5 “espaços” do Bootstrap. No card superior, dá para colocar um pb-5 para dar um padding na parte de baixo (bottom). Leia mais sobre essas propriedades do Bootstrap aqui.