CSS Border

Uma borda é uma linha desenhada ao redor das arestas da caixa de um elemento, entre seu padding e sua margem. As bordas são uma das formas mais comuns de separar visualmente conteúdos, destacar uma caixa ou criar elementos de interface como cards, botões e campos de entrada.

Toda borda tem três ingredientes, e você quase sempre define os três:

width — a espessura da linha (por exemplo, 2px, thin, thick).
style — a aparência da linha (por exemplo, solid, dashed, dotted). Esta é a única propriedade que deve estar presente — sem um border-style, o navegador não exibe nenhuma borda, mesmo que você defina uma largura e uma cor.
color — a cor da linha (por exemplo, red, #1c87c9, rgb(0,0,0)).

Você pode defini-los individualmente com border-width, border-style e border-color, ou todos de uma vez com a propriedade abreviada border. O restante deste capítulo percorre cada opção.

Exemplo da propriedade border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Border Width

A propriedade border-width define a largura de uma borda.

A largura pode ser especificada em uma unidade de comprimento como pixels (px), em ou rem. Também pode ser definida com uma das três palavras-chave predefinidas: thin, medium ou thick. O tamanho exato dessas palavras-chave fica a critério do navegador, mas thin < medium < thick.

Você não pode usar border-width sozinho — não tem efeito visível sem um border-style, pois o estilo padrão é none. Sempre defina o estilo (ou use a propriedade abreviada border) primeiro.

Você também pode fornecer até quatro valores para border-width a fim de dimensionar cada lado independentemente, exatamente como border-style: um valor define todos os lados, dois definem superior/inferior e esquerdo/direito, quatro definem superior, direito, inferior e esquerdo em sentido horário.

Exemplo da propriedade border-width:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

Experimente Você Mesmo »

Border Color

A propriedade border-color é usada para definir a cor de uma borda. A cor pode ser definida por:

nome - especifica um nome de cor, como "red"
RGB - especifica um valor RGB, como "rgb(255,0,0)"
Hex - especifica um valor hexadecimal, como "#ff0000"

Você não pode usar a propriedade "border-color" sozinha. Ela não funcionará. Use "border-style" para definir as bordas primeiro.

Normalmente, escrevemos essas três propriedades juntas em uma única linha.

Exemplo da propriedade border-color:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

Experimente Você Mesmo »

Observe o último parágrafo: quando border-color recebe quatro valores, eles se aplicam aos lados superior, direito, inferior e esquerdo nessa ordem horária.

Border Style

A propriedade CSS border-style define o estilo de todos os quatro lados das bordas de um elemento. As bordas são posicionadas sobre o fundo do elemento. Ela pode ter de um a quatro valores, portanto cada lado pode ter o seu próprio valor. O valor padrão de border-style é none.

Border-style tem os seguintes valores:

dotted
dashed
solid
double
groove
ridge
inset
outset

Veja o que cada valor significa:

dotted — uma série de pontos redondos.
dashed — uma série de traços curtos.
solid — uma linha reta simples. Este é de longe o estilo mais comum.
double — duas linhas sólidas paralelas. A largura combinada é igual ao valor de border-width.
groove — parece que a borda está esculpida na página (efeito 3D).
ridge — o oposto de groove; a borda parece se projetar para fora.
inset — faz toda a caixa parecer pressionada para dentro da página.
outset — faz a caixa parecer elevada em relação à página.

Os efeitos groove, ridge, inset e outset dependem da cor da borda, por isso parecem sutis (ou invisíveis) em uma borda fina ou sobre um fundo semelhante. Use um border-width de pelo menos 3px para vê-los com clareza.

CSS Border para lados individuais

O CSS fornece propriedades que especificam cada borda (direita, esquerda, inferior e superior).

A propriedade border-style pode ter 4 valores, por exemplo, border-style: dotted solid double dashed; onde a borda superior é pontilhada, a borda inferior é dupla, a borda direita é sólida e a borda esquerda é tracejada.

A propriedade border-style pode ter 3 valores, por exemplo, border-style: dotted solid double; onde a borda superior é pontilhada, a borda inferior é dupla, e as bordas direita e esquerda são sólidas.

A propriedade border-style pode ter 2 valores, por exemplo, border-style: dotted solid; onde as bordas direita e esquerda são sólidas, e as bordas superior e inferior são pontilhadas. E, claro, essa propriedade pode ter apenas 1 valor, por exemplo, border-style: solid; onde todos os lados são sólidos.

Exemplo das propriedades border para lados individuais:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

Experimente Você Mesmo »

CSS border como propriedade abreviada

A propriedade CSS border é uma propriedade abreviada para as seguintes propriedades de borda individuais:

A propriedade CSS border-width, que define a largura de todos os quatro lados da borda de um elemento.
A propriedade CSS border-style, que define o estilo de todos os quatro lados das bordas de um elemento.
A propriedade CSS border-color, que define a cor de todos os quatro lados da borda de um elemento.

Exemplo da propriedade abreviada border:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

Experimente Você Mesmo »

Bordas arredondadas

Usando a propriedade CSS border-radius, você pode adicionar bordas arredondadas a um elemento.

Exemplo da propriedade border-radius:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

Experimente Você Mesmo »

A diferença entre bordas e outlines

Uma borda e um outline ambos desenham uma linha ao redor de um elemento, por isso é fácil confundi-los. As principais diferenças são:

Uma borda faz parte do modelo de caixa. Ela fica entre o padding e a margem e ocupa espaço, portanto adicionar uma borda pode deslocar o layout dos elementos ao redor.
Um outline é desenhado fora da borda e não ocupa espaço, portanto nunca altera o tamanho ou a posição do elemento ou de seus vizinhos.
Uma borda pode ter estilo, largura e cor diferentes em cada lado. Um outline é igual nos quatro lados.
Um outline pode ser deslocado do elemento com outline-offset; bordas não podem ser deslocadas.

Como os outlines não afetam o layout, eles são comumente usados para o estado :focus de botões e links — o anel de foco pode aparecer sem deslocar o restante da página.

Capítulos relacionados

CSS border-width — controle a espessura de cada lado.
CSS border-style — todos os estilos de linha em detalhes.
CSS border-color — defina cores por lado.
CSS border-radius — arredonde os cantos.
CSS outline — a alternativa à borda que não impacta o layout.
CSS padding — o espaço logo dentro da borda.

Prática

Quais das seguintes são propriedades que podem ser usadas para estilizar bordas em CSS?