Como estilizar uma imagem com 2 ou 3 bordas com CSS

Neste artigo vamos aprender outra dica super simples do uso do CSS, vamos criar uma imagem com duas ou três bordas.

Vamos usar a seguinte imagem como referência;

<img src="https://cdn.pixabay.com/photo/2020/11/09/15/12/trail-5726987_960_720.jpg" width="300px">

Para dar mais estilo, vamos aplicar uma borda arredonda, aproveitando para criar uma classe chamada bordas

<style>
    .duasBordas{
        border-radius: 50%;
    }
</style>

<img class="duasBordas" src="https://cdn.pixabay.com/photo/2020/11/09/15/12/trail-5726987_960_720.jpg" width="300px">

Aplicando bordas na imagem com CSS

Inicialmente vamos aplicar a borda que já conhecemos, as regras básicas de criação de bordas que aprendemos nas primeias aulas de CSS.

<style>
    .duasBordas{
        border-radius: 50%;
        border-style: solid;
        border-width: 5px;
        border-color: blue;
    }
</style>

Criando duas bordas com CSS

Agora vamos ver como criar duas bordas com CSS. O truque chega a ser bobo, consiste em apenas aplicar um padding na imagem e uma cor de fundo, ficando assim:

<style>
    .duasBordas{
        border-radius: 50%;
        border-style: solid;
        border-width: 5px;
        border-color: blue;
        padding: 5px;
        background-color: yellow;
    }
</style>

Criando três bordas com CSS

Se duas bordas não forem suficiente, o ideal então é criar logo 3 de uma vez. Para criar a terceira borda podemos usar o efeito de box-shadow. Evite usar DIV para criar a terceira borda, pode ser algo dificil de lidar no futuro. Eis então que temos;

<style>
    .tresBordas{
        border-radius: 50%;
        border-style: solid;
        border-width: 5px;
        border-color: blue;
        padding: 5px;
        background-color: yellow;        
        box-shadow: 0 0px 0px 5px red;
    }
</style>

Espero que tenha gostado da dica! Até a próxima.