Atributo border-style CSS

Definição e uso

A propriedade border-style é usada para definir o estilo de todos os bordas do elemento, ou para definir o estilo de borda de cada lado separadamente.

A borda apenas pode aparecer quando este valor não for none.

Exemplo 1

border-style:dotted solid double dashed;
  • A borda superior é pontilhada
  • A borda direita é sólida
  • A borda inferior é dupla
  • A borda esquerda é tracejada

Exemplo 2

border-style:dotted solid double;
  • A borda superior é pontilhada
  • A borda direita e esquerda são linhas sólidas
  • A borda inferior é dupla

Exemplo 3

border-style:dotted solid;
  • A borda superior e inferior são pontilhadas
  • A borda direita e esquerda são linhas sólidas

Exemplo 4

border-style:dotted;
  • Todos os 4 bordas são pontilhadas

Veja também:

Tutorial de CSS:Borda do CSS

Manual de referência do HTML DOM:Atributo borderStyle

Exemplo

Configurar o estilo das 4 bordas:

p
  {
  border-style:solid;
  }

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valores Descrição
none Define borda sem borda.
hidden É o mesmo que "none", exceto quando aplicado a tabelas, para tabelas, "hidden" é usado para resolver conflitos de borda.
dotted Define borda pontilhada. Em muitos navegadores, é apresentada como linha sólida.
dashed Define linha pontilhada. Em muitos navegadores, é apresentada como linha sólida.
solid Define linha sólida.
double Define linhas duplas. A largura das linhas é igual ao valor de border-width.
groove Define a borda 3D grooved. Seu efeito depende do valor de border-color.
ridge Define a borda 3D ribbed. Seu efeito depende do valor de border-color.
inset Define a borda 3D inset. Seu efeito depende do valor de border-color.
outset Define a borda 3D outset. Seu efeito depende do valor de border-color.
inherit Deve herdar o estilo de borda do elemento pai.

Descrição

O estilo de borda mais imprevisível é double. Ele é definido como duas linhas de largura mais o espaço entre essas duas linhas que é igual ao valor de border-width. No entanto, a especificação do CSS não diz se uma linha é mais grossa que a outra ou se as duas devem ter a mesma largura, nem indica se o espaço entre as linhas deve ser maior que a largura das linhas. Tudo isso é decidido pelo agente de usuário, e os criadores não têm influência sobre essa decisão.

Detalhes técnicos

Valor padrão: não especificado
Herança: não
Versão: CSS1
Sintaxe do JavaScript: object.style.borderStyle="dotted double"

Mais exemplos

Configurar o estilo das quatro bordas
Este exemplo demonstra como configurar o estilo das quatro bordas.
Configurar diferentes bordas em cada lado
Este exemplo demonstra como configurar diferentes bordas em todos os lados do elemento.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5