0Pricing
CSS Academy · Aula

Estilos, Largura e Cor das Bordas

Aplique bordas com diferentes estilos, larguras e cores usando propriedades abreviadas e detalhadas.

Estilos, Largura e Cor das Bordas é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Atalho da borda

O atalho border define os quatro lados de uma vez: largura, estilo e cor.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Valores do estilo da borda

border-style precisa ser definido para que uma borda apareça. Valores disponíveis:

  • solid — linha contínua
  • dashed — traços longos
  • dotted — pontos redondos
  • double — duas linhas paralelas
  • groove/ridge/inset/outset — efeitos tridimensionais
  • none — sem borda (padrão)

Largura da borda

border-width aceita qualquer unidade de comprimento ou as palavras-chave thin, medium, thick. Use números para obter precisão.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

Cor da borda

border-color aceita qualquer valor de cor do CSS, incluindo RGBA para transparência. currentColor herda a cor do texto.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Bordas de cada lado

Defina bordas em lados específicos usando propriedades individuais:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

Raio da borda

border-radius arredonda os cantos do elemento. Use um único valor para um arredondamento uniforme ou até quatro valores para controlar cada canto.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Raio elíptico da borda

Cada raio de canto pode ter dois valores separados por / para produzir um arredondamento elíptico assimétrico:

<div class="leaf"></div>

Imagem da borda

border-image substitui a borda por uma imagem fatiada ou um gradiente, permitindo criar bordas decorativas:

<div class="fancy">Gradient border image</div>

Contorno versus borda

outline desenha uma linha fora da borda. Ao contrário da borda, ele não afeta a disposição nem as dimensões do elemento. É usado com frequência como indicador de foco do teclado.

<button class="focus-demo">Focused Button (demo)</button>

Remover o contorno: use com cuidado

Nunca remova os contornos de :focus sem fornecer um indicador de foco alternativo e visível. Remover os estilos de foco prejudica as pessoas que usam o teclado e leitores de tela.

<button>Button without outline</button>
<a href="#">Link without outline</a>

Colapso de bordas em tabelas

Em tabelas HTML, border-collapse: collapse combina as bordas adjacentes das células em uma única linha, criando uma aparência mais limpa.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Verificação rápida

Qual propriedade do CSS desenha uma linha fora da borda sem afetar a disposição do elemento?

Recapitulação

O atalho border define a largura, o estilo e a cor. border-radius arredonda os cantos. outline é separado da borda: não afeta a disposição e é fundamental para os indicadores de foco acessíveis pelo teclado.

Perguntas Frequentes

A aula “Estilos, Largura e Cor das Bordas” é grátis?

Sim — o texto completo de “Estilos, Largura e Cor das Bordas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Estilos, Largura e Cor das Bordas”?

Aplique bordas com diferentes estilos, larguras e cores usando propriedades abreviadas e detalhadas. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Estilos, Largura e Cor das Bordas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Compreendendo Largura, Altura, Margem e Preenchimento
  2. Estilos, Largura e Cor das Bordas
  3. Box-Sizing: Content-Box vs Border-Box
  4. Contorno e Sombra da Caixa
← Voltar para CSS Academy