Atributo border-style CSS
- página anterior border-start-start-radius
- Próxima página border-top
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
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 |
- página anterior border-start-start-radius
- Próxima página border-top