Propriedade CSS border-style

A propriedade CSS border-style define o estilo de linha dos quatro lados da borda de um elemento de uma só vez — por exemplo, solid, dashed ou dotted. Esta página explica cada valor, como o shorthand de um a quatro valores mapeia para cada lado, e os pontos de atenção que vale conhecer antes de usar uma borda.

border-style é um shorthand para as quatro propriedades individuais de lado: border-top-style, border-bottom-style, border-left-style e border-right-style.

Por que isso importa

Uma borda só fica visível quando possui um estilo. Esta é a armadilha mais comum para iniciantes: se você definir border-width e border-color, mas deixar border-style com o valor padrão none, nada é renderizado — o navegador não reserva espaço nem pinta nenhuma linha. Portanto, border-style é efetivamente o interruptor que ativa uma borda. Na maioria dos casos reais, você define os três ao mesmo tempo com o shorthand border (ex.: border: 1px solid #1c87c9;), mas usar border-style diretamente é útil quando você quer um estilo de linha diferente por lado, ou quando altera apenas o estilo ao passar o mouse/focar enquanto mantém a largura fixa (o que evita deslocamento de layout).

A borda é pintada sobre o fundo do elemento, o valor não é herdado e não é animável.

Como funciona o shorthand de um a quatro valores

border-style aceita de um a quatro valores, de modo que cada lado pode ter seu próprio estilo:

Um valor — aplicado a todos os quatro lados.
Dois valores — o primeiro é superior e inferior; o segundo é esquerdo e direito.
Três valores — o primeiro é o superior; o segundo é esquerdo e direito; o terceiro é o inferior.
Quatro valores — superior, direito, inferior, esquerdo, em ordem horária (mnemônico útil: TRouBLe).

Uma observação rápida sobre suporte a navegadores: todos os navegadores modernos suportam todos os valores abaixo. Os estilos 3D (groove, ridge, inset, outset) renderizam seu efeito a partir de border-color, por isso ficam sutis em cores claras e desaparecem completamente quando a cor é black ou muito escura.

Valor inicial	none
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não.
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.borderStyle = "dotted double";

Sintaxe

Sintaxe da propriedade CSS border-style

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Exemplo da propriedade border-style:

Exemplo da propriedade CSS border-style com o valor dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-style: dotted;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade border-style onde cada lado tem seu próprio valor:

Exemplo da propriedade CSS border-style com os valores double, solid, dashed e dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-width: 4px;
        border-style: double solid dashed dotted;
        border-color: #1c87c9;
        color: #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Example, where each side has own value.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade border-style com todos os valores:

Exemplo da propriedade CSS border-style com os valores hidden, double, solid, dashed, dotted, groove, ridge, inset e outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #eee;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 8px solid #1c87c9;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-style example classes */
      .b1 {
        border-style: hidden;
      }
      .b2 {
        border-style: dotted;
      }
      .b3 {
        border-style: dashed;
      }
      .b4 {
        border-style: solid;
      }
      .b5 {
        border-style: double;
      }
      .b6 {
        border-style: groove;
      }
      .b7 {
        border-style: ridge;
      }
      .b8 {
        border-style: inset;
      }
      .b9 {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
none	Não exibe nenhuma borda. Valor padrão.	Experimente »
hidden	O mesmo que "none", exceto na resolução de conflitos de borda em elementos de tabela.	Experimente »
dotted	A borda é especificada como uma série de pontos.	Experimente »
dashed	A borda é especificada como uma série de traços.	Experimente »
solid	A borda é especificada como linhas sólidas.	Experimente »
double	A borda é especificada como linhas sólidas duplas.	Experimente »
groove	É uma borda 3D com ranhura que dá a impressão de que a borda está entalhada. Oposto de ridge.	Experimente »
ridge	Especifica uma borda 3D com crista que dá a impressão de aparência em relevo. Oposto de groove.	Experimente »
inset	É um efeito 3D que dá a impressão de que o elemento está embutido. Oposto de outset.	Experimente »
outset	É um efeito 3D que dá a impressão de que o elemento está em relevo. Oposto de inset.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Pontos de atenção comuns

Sem estilo, sem borda. Com border-style: none (o padrão), border-width e border-color não têm efeito visível. Sempre defina um estilo.
hidden vs none. Parecem idênticos em uma caixa normal. A diferença só aparece em tabelas: na resolução de conflitos de borda, hidden vence e suprime a borda da célula vizinha, enquanto none tem a menor prioridade.
groove, ridge, inset e outset precisam de uma borda colorida com múltiplos pixels. A ilusão 3D é construída a partir de tons mais claros/escuros de border-color, portanto use uma largura de pelo menos 2px–4px e evite preto ou branco puro.
Alterar apenas border-style mantém o tamanho da caixa estável porque a largura não muda — útil para estados de hover/focus que trocam dashed por solid sem deslocar o layout.

Propriedades relacionadas

border — define largura, estilo e cor em uma única declaração.
border-width e border-color — as outras duas partes de uma borda.
border-radius — arredonda os cantos de uma borda estilizada.
outline-style — os mesmos estilos de linha para contornos (que ficam fora da borda e não afetam o layout).

Por que isso importa

Como funciona o shorthand de um a quatro valores

Sintaxe

Exemplo da propriedade border-style:

Exemplo da propriedade border-style onde cada lado tem seu próprio valor:

Resultado

Exemplo da propriedade border-style com todos os valores:

Valores

Pontos de atenção comuns

Propriedades relacionadas

Prática