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">
![](https://www.blogson.com.br/wp-content/uploads/2020/11/como-colocar-bordas-nas-imagens-com-CSS.png)
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">
![](https://www.blogson.com.br/wp-content/uploads/2020/11/imagens-com-bordas-arredondadas-usando-CSS.png)
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>
![](https://www.blogson.com.br/wp-content/uploads/2020/11/imagens-com-bordas-usando-CSS.png)
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>
![](https://www.blogson.com.br/wp-content/uploads/2020/11/imagem-com-duas-bordas-com-CSS.png)
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>
![](https://www.blogson.com.br/wp-content/uploads/2020/11/imagem-com-tres-bordas-com-CSS.png)
Espero que tenha gostado da dica! Até a próxima.