No CSS, existem várias maneiras de adicionar bordas ao redor de imagens, cada uma oferecendo diferentes opções de estilo e níveis de controle. Vamos explorar alguns dos métodos mais comuns e versáteis. A maneira mais simples de adicionar uma borda a uma imagem é usando a propriedade border. Esta propriedade é uma forma abreviada que permite definir a largura, o estilo e a cor da borda tudo de uma vez.

<link rel="stylesheet" href="styles.css">

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">

img {
  border: 2px solid red;
}

Esta regra CSS adiciona uma borda vermelha sólida de 2 pixels de largura ao redor de todos os elementos img. Você pode ajustar a largura, o estilo (como dashed, dotted ou double) e a cor para atender às suas necessidades de design. Se você precisar de mais controle sobre os lados individuais da borda, pode usar as propriedades específicas da borda para cada lado:

<link rel="stylesheet" href="styles.css">

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">

img {
  border-top: 10px solid red;
  border-right: 10px dashed green;
  border-bottom: 10px dotted blue;
  border-left: 10px double purple;
}

Isso permite que você crie estilos de borda únicos para cada lado da imagem. Outra forma de criar um efeito de borda é usando a propriedade outline. Embora seja semelhante a border, outline não afeta as dimensões ou o layout do elemento:

<link rel="stylesheet" href="styles.css">

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cate lying on its back.">

img {
  outline: 3px solid gold;
}

Isso cria um contorno dourado ao redor da imagem sem alterar seu tamanho ou posição. Se você quiser criar cantos arredondados na sua borda, pode usar a propriedade border-radius em conjunto com border:

<link rel="stylesheet" href="styles.css">

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cate lying on its back.">

img {
  border: 2px solid black;
  border-radius: 10px;
}

Lembre-se, essas técnicas podem ser combinadas e personalizadas para criar efeitos de borda únicos. A escolha do método depende dos seus requisitos específicos de design e do nível de complexidade que você precisa.