Docs executáveis de CSS: Border CSS

Q: Como colocar borda no CSS?

Use o shorthand com largura, estilo e cor: border: 2px solid #2563eb;. O estilo é a parte mais importante: sem ele, o border-style é none e nenhuma borda é desenhada.

Q: Por que minha borda CSS não aparece?

Quase sempre porque nenhum estilo de borda foi definido. border: 2px #2563eb; ou só border-color: red; não desenham nada, já que o border-style padrão é none. Acrescente solid, dashed ou outro estilo.

Q: Como fazer cantos arredondados no CSS?

Use border-radius: border-radius: 8px; arredonda os quatro cantos. border-radius: 50%; em um quadrado faz um círculo, e um valor grande como 999px faz o formato de pílula. Ele arredonda o fundo também, mesmo sem borda.

Q: Como colocar borda só em um lado?

Use a propriedade do lado: border-bottom: 2px solid #e5e7eb;, ou border-inline-start para o lado onde o texto começa, que também funciona em idiomas da direita para a esquerda.

O shorthand border

border desenha uma linha em volta de um elemento, entre o padding e a margin. O shorthand recebe três partes em qualquer ordem: uma largura, um estilo e uma cor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Parte	Propriedade longa	Valores	Padrão
Largura	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Estilo	`border-style`	`solid`, `dashed`, `dotted`, `double` e outros	`none`
Cor	`border-color`	Qualquer cor	`currentColor` (a cor do texto)

O estilo é a parte que não dá para pular. O padrão dele é none, então border: 2px #2563eb; não desenha nada. Se você deixar a cor de fora, a borda pega a cor do texto do elemento.

Estilos de borda

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double precisa de pelo menos 3px para mostrar duas linhas. groove, ridge, inset e outset sombreiam a cor para parecer 3D e variam um pouco entre navegadores. hidden parece none; os dois só diferem dentro de tabelas com bordas colapsadas, assunto da página de borda em tabela HTML.

Um lado de cada vez

Cada lado tem o próprio shorthand (border-top, border-right, border-bottom, border-left), e cada parte tem propriedades longas por lado, como border-top-color. As versões lógicas, border-inline-start e border-block-end, seguem a direção do texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width e border-style aceitam de um a quatro valores, na mesma ordem horária do padding: topo, direita, base, esquerda.

Cantos arredondados com border-radius

border-radius arredonda os cantos da borda e do fundo, então funciona até em elementos sem borda nenhuma.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Valor	Resultado
`border-radius: 8px`	Todos os cantos arredondados em 8px
`border-radius: 50%`	Um círculo em um elemento quadrado, uma elipse em um retângulo
`border-radius: 999px`	Uma pílula: os lados curtos viram semicírculos completos
`border-radius: 8px 0`	Superior esquerdo e inferior direito com 8px, os outros dois retos
`border-top-left-radius: 12px`	Só um canto
`border-radius: 50% / 25%`	Cantos elípticos: raio horizontal / raio vertical

Um filho com fundo pode vazar pelos cantos de um pai arredondado. overflow: hidden no pai o recorta seguindo a curva.

Border vs outline

O outline parece uma borda, mas é desenhado fora dela e não ocupa espaço, então acrescentar um nunca move nada. É por isso que os navegadores usam outlines para os anéis de foco.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Ocupa espaço	Sim, faz parte do tamanho da caixa	Não
Por lado	Sim (`border-top`, ...)	Não, em volta toda
Segue o `border-radius`	Sim	Sim, nos navegadores atuais
Afastamento da caixa	Não	Sim, `outline-offset`
Uso típico	Design	Indicadores de foco, depuração

Erros comuns

Sem estilo de borda. border: 1px #111827; e border-color: red; não desenham nada. Inclua solid (ou outro estilo).
Uma borda que faz o layout pular no hover. Reserve o espaço com uma borda transparente, ou use outline ou box-shadow.
Esquecer a borda na largura. Um elemento width: 100% com borda transborda o contêiner com content-box. Use box-sizing: border-box.
border-radius com um filho vazando pelos cantos. Acrescente overflow: hidden ao pai arredondado.
Remover o outline de foco com outline: none. Quem usa teclado precisa dele; mude o estilo do outline em vez de apagá-lo.

Perguntas frequentes

Como colocar borda no CSS?

Use o shorthand com largura, estilo e cor: border: 2px solid #2563eb;. O estilo é a parte mais importante: sem ele, o border-style é none e nenhuma borda é desenhada.

Por que minha borda CSS não aparece?

Quase sempre porque nenhum estilo de borda foi definido. border: 2px #2563eb; ou só border-color: red; não desenham nada, já que o border-style padrão é none. Acrescente solid, dashed ou outro estilo.

Como fazer cantos arredondados no CSS?

Use border-radius: border-radius: 8px; arredonda os quatro cantos. border-radius: 50%; em um quadrado faz um círculo, e um valor grande como 999px faz o formato de pílula. Ele arredonda o fundo também, mesmo sem borda.

Como colocar borda só em um lado?

Use a propriedade do lado: border-bottom: 2px solid #e5e7eb;, ou border-inline-start para o lado onde o texto começa, que também funciona em idiomas da direita para a esquerda.

Qual a diferença entre border e outline?

A borda faz parte da caixa: ocupa espaço e muda o tamanho do elemento. O outline é desenhado fora da borda sem ocupar espaço, não pode ser definido por lado e é o que os navegadores usam para os anéis de foco. Os dois seguem o border-radius nos navegadores atuais.

Conceitos relacionados