EasyCode365EasyCode365

Fundos e bordas

Fundos e bordas ajudam elementos HTML simples a parecerem mais visuais e organizados.

Você pode usá-los para criar cards, alertas, botões, caixas de perfil e seções de página. Uma cor de fundo simples ou uma borda pode deixar o conteúdo muito mais fácil de escanear.

Nesta aula, você aprenderá a estilizar fundos, imagens de fundo, linhas de borda e cantos arredondados.

O que fundos e bordas fazem

Um fundo fica atrás do conteúdo de um elemento.

Por padrão, o fundo aparece atrás do conteúdo, do padding e da área da borda. Ele não preenche o margin, porque margin é espaço transparente fora do elemento.

Uma borda é uma linha ao redor do elemento.

Por padrão, bordas aumentam o tamanho final do elemento. Se você usar box-sizing: border-box, a borda fica incluída dentro da largura que você definiu.

Editável
<div class="box-demo">
  <div class="demo-box content-box">content-box</div>
  <div class="demo-box border-box">border-box</div>
</div>

<style>
  .box-demo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
  }

  .demo-box {
    width: 160px;
    padding: 20px;
    border: 6px solid royalblue;
    background-color: lightblue;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>

As duas caixas usam width: 160px, mas o exemplo com content-box fica mais largo depois que o padding e a borda são adicionados. O exemplo com border-box mantém a caixa visível final na largura que você escreveu.

Cores de fundo

A propriedade background-color define uma cor sólida atrás de um elemento.

Você pode usar qualquer formato de cor válido em CSS, como nome de cor, código hex, valor RGB ou valor HSL.

Editável
<div class="alert-box">Lembre-se de salvar seu trabalho.</div>

<style>
  .alert-box {
    padding: 16px;
    background-color: lightyellow;
    font-family: Arial, sans-serif;
  }
</style>

Escolha uma cor de fundo que mantenha o texto fácil de ler. Texto claro em fundo claro, ou texto escuro em fundo escuro, pode ser difícil de ver.

Imagens de fundo

A propriedade background-image coloca uma imagem atrás de um elemento.

Use a função url() para dizer ao navegador onde está o arquivo de imagem.

Editável
<section class="hero-section">
  <h2>Clube de trilhas do fim de semana</h2>
</section>

<style>
  .hero-section {
    padding: 40px;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
  }
</style>

O caminho da imagem pode ser um caminho de arquivo local ou uma URL completa.

Lembre-se: se você esquecer url(), a imagem de fundo não funcionará.

Comportamento de repetição do fundo

Por padrão, uma imagem de fundo se repete.

Isso significa que o navegador coloca a imagem várias vezes até preencher o elemento.

Use background-repeat para controlar esse comportamento:

  • repeat: repete a imagem na horizontal e na vertical
  • no-repeat: mostra a imagem uma única vez
  • repeat-x: repete a imagem apenas da esquerda para a direita
  • repeat-y: repete a imagem apenas de cima para baixo
Editável
<div class="repeat-demo">
  <div class="pattern-box repeat-pattern">repeat</div>
  <div class="pattern-box single-pattern">no-repeat</div>
</div>

<style>
  .repeat-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .pattern-box {
    width: 140px;
    height: 90px;
    padding: 12px;
    border: 1px solid #ccc;
    background-image: radial-gradient(circle, #2563eb 3px, transparent 4px);
    background-size: 24px 24px;
  }

  .repeat-pattern {
    background-repeat: repeat;
  }

  .single-pattern {
    background-repeat: no-repeat;
  }
</style>

Padrões pequenos podem ficar bons com repeat. Fotos e logos geralmente precisam de no-repeat.

Posição e tamanho do fundo

Quando uma imagem de fundo não se repete, ela começa no canto superior esquerdo por padrão.

A propriedade background-position move a imagem dentro do elemento.

Editável
<div class="logo-box">Imagem colocada à direita.</div>

<style>
  .logo-box {
    width: 320px;
    padding: 32px 120px 32px 20px;
    border: 1px solid #ccc;
    background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=120&auto=format&fit=crop");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Arial, sans-serif;
  }
</style>

Valores úteis de posição incluem top, bottom, left, right e center.

A propriedade background-size controla o tamanho com que a imagem aparece.

  • cover: preenche todo o elemento, mas pode cortar parte da imagem
  • contain: mostra a imagem inteira, mas pode deixar espaço vazio
Editável
<div class="banner-demo">
  <div class="banner cover-banner">cover</div>
  <div class="banner contain-banner">contain</div>
</div>

<style>
  .banner-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .banner {
    width: 180px;
    height: 120px;
    display: grid;
    place-items: center;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .cover-banner {
    background-size: cover;
  }

  .contain-banner {
    background-size: contain;
    background-color: #1f2937;
  }
</style>

Use cover quando a imagem deve preencher a caixa. Use contain quando ver a imagem inteira importa mais do que preencher a caixa.

Largura, estilo e cor da borda

Uma borda tem três partes principais:

  • largura: a espessura da linha
  • estilo: o tipo de linha
  • cor: a cor da linha

A maioria dos desenvolvedores usa o atalho border:

Editável
<div class="card">Este card tem uma borda.</div>

<style>
  .card {
    padding: 20px;
    border: 2px solid black;
    font-family: Arial, sans-serif;
  }
</style>

Isso significa:

  • 2px: largura da borda
  • solid: estilo da borda
  • black: cor da borda

O estilo da borda é obrigatório. Se você escrever border: 2px black;, a borda não aparecerá porque o estilo está faltando.

Estilos de borda

Os estilos de borda mais comuns são:

  • solid: uma linha contínua
  • dashed: pequenos segmentos de linha
  • dotted: pequenos pontos
  • none: sem borda
Editável
<div class="coupon">Economize 20%</div>

<style>
  .coupon {
    display: inline-block;
    padding: 16px 24px;
    border: 2px dashed green;
    font-family: Arial, sans-serif;
  }
</style>

Use estilos de borda com cuidado. Uma borda solid geralmente é a mais fácil de ler.

Border radius

A propriedade border-radius arredonda os cantos de um elemento.

Editável
<button class="rounded-button">Salvar alterações</button>

<style>
  .rounded-button {
    padding: 10px 16px;
    border: 2px solid blue;
    border-radius: 8px;
    background-color: white;
    font-family: Arial, sans-serif;
  }
</style>

Um valor pequeno, como 6px ou 8px, cria cantos levemente arredondados.

Um valor grande pode criar uma forma de pílula, especialmente em botões.

Editável
<button class="pill-button">Continuar</button>

<style>
  .pill-button {
    padding: 10px 24px;
    border: 2px solid purple;
    border-radius: 999px;
    background-color: lavender;
    font-family: Arial, sans-serif;
  }
</style>

Valores muito grandes de border-radius nem sempre criam um círculo perfeito. A forma final depende da largura e da altura do elemento.

Use border-radius: 50% quando quiser criar um círculo a partir de um elemento quadrado:

Editável
<div class="circle">CSS</div>

<style>
  .circle {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 3px solid #2563eb;
    border-radius: 50%;
    background-color: #dbeafe;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }
</style>

A largura e a altura são iguais, então 50% cria um círculo. Se o elemento fosse mais largo do que alto, o mesmo valor criaria um oval.

Exemplo executável: card de perfil

Este exemplo combina uma cor de fundo, uma imagem de fundo, borda e border radius.

Tente trocar background-size: cover; por background-size: contain; e execute o exemplo novamente.

Editável
<div class="profile-card">
  <h2>Estudante de CSS</h2>
  <p>Aprendendo como fundos e bordas moldam um design.</p>
</div>

<style>
  .profile-card {
    box-sizing: border-box;
    width: 320px;
    padding: 24px;
    border: 4px solid #facc15;
    border-radius: 16px;
    background-color: #1d4ed8;
    background-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-family: Arial, sans-serif;
  }

  .profile-card h2 {
    margin-top: 0;
  }
</style>

A imagem de fundo preenche o card, a borda o enquadra e os cantos arredondados suavizam a forma.

O background-color ainda é útil. Ele funciona como cor de fallback enquanto a imagem carrega ou se a imagem não puder carregar.

Erros comuns de iniciantes

  • Esquecer url(): escreva background-image: url("photo.jpg");, não background-image: "photo.jpg";.
  • Usar imagens enormes: imagens muito grandes podem fazer as páginas carregarem lentamente.
  • Esperar que não repita por padrão: imagens de fundo se repetem, a menos que você defina background-repeat: no-repeat;.
  • Esquecer o estilo da borda: border: 2px black; não aparecerá porque falta solid, dashed ou outro estilo.
  • Usar border radius demais: valores muito grandes podem criar formas ovais ou de pílula inesperadas.
  • Usar pouco contraste: uma imagem de fundo muito carregada pode dificultar a leitura do texto.

Mini tarefa

Execute este exemplo de botão:

Editável
<button>Verificar resposta</button>

<style>
  button {
    border: 4px dotted green;
  }
</style>

Qual é a largura, o estilo e a cor da borda?

Veja as respostas do quiz quando estiver pronto.

Quiz rápido com respostas

  1. Qual valor de background-size preenche todo o elemento, mesmo que parte da imagem seja cortada?
  2. Uma cor de fundo preenche a área do margin?
  3. O que acontece se você esquecer o estilo no atalho border?

Respostas:

  1. cover.
  2. Não. O margin é transparente.
  3. A borda não aparecerá.

Resposta da mini tarefa: a largura é 4px, o estilo é dotted e a cor é green.

Pequeno desafio

Estilize a caixa de alerta abaixo.

Seus objetivos:

  • Adicionar uma cor de fundo vermelho claro.
  • Adicionar uma borda vermelho-escura sólida de 3px.
  • Arredondar os cantos com 6px.
Editável
<div class="alert-box">
  <h3>Aviso</h3>
  <p>Confira sua senha e tente novamente.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
  }
</style>

Uma possível solução:

Editável
<div class="alert-box">
  <h3>Aviso</h3>
  <p>Confira sua senha e tente novamente.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
    background-color: lightpink;
    border: 3px solid darkred;
    border-radius: 6px;
  }
</style>

Resumo

  • background-color define uma cor sólida atrás de um elemento.
  • background-image adiciona uma imagem com url().
  • background-repeat controla se uma imagem de fundo se repete.
  • background-position move uma imagem de fundo dentro do elemento.
  • background-size controla o tamanho com que a imagem de fundo aparece.
  • cover preenche toda a caixa, mas pode cortar a imagem.
  • contain mostra a imagem inteira, mas pode deixar espaço vazio.
  • border pode definir largura, estilo e cor em uma só linha.
  • border-radius arredonda os cantos de um elemento.