Propriedade de estilo de borda CSS
Exemplo
Defina um estilo para a borda:
div {border-style: dotted;}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A border-stylepropriedade define o estilo das quatro bordas de um elemento. Esta propriedade pode ter de um a quatro valores.
Exemplos:
- estilo de borda: pontilhado sólido duplo tracejado;
- borda superior é pontilhada
- borda direita é sólida
- borda inferior é dupla
- borda esquerda é tracejada
- estilo de borda: duplo sólido pontilhado;
- borda superior é pontilhada
- as bordas direita e esquerda são sólidas
- borda inferior é dupla
- estilo de borda: sólido pontilhado;
- as bordas superior e inferior são pontilhadas
- as bordas direita e esquerda são sólidas
- estilo de borda: pontilhado;
- todas as quatro bordas são pontilhadas
| Valor padrão: | Nenhum |
|---|---|
| Herdado: | não |
| Animavel: | não. Leia sobre animáveis |
| Versão: | CSS1 |
| Sintaxe JavaScript: | object .style.borderStyle="dotted double" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: O valor "hidden" não é suportado no IE7 e versões anteriores. O IE8 requer um !DOCTYPE. IE9 e suporte posterior "oculto".
Sintaxe CSS
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| none | Default value. Specifies no border | |
| hidden | The same as "none", except in border conflict resolution for table elements | |
| dotted | Specifies a dotted border | |
| dashed | Specifies a dashed border | |
| solid | Specifies a solid border | |
| double | Specifies a double border | |
| groove | Specifies a 3D grooved border. The effect depends on the border-color value | |
| ridge | Specifies a 3D ridged border. The effect depends on the border-color value | |
| inset | Specifies a 3D inset border. The effect depends on the border-color value | |
| outset | Specifies a 3D outset border. The effect depends on the border-color value | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Uma borda tracejada:
div {border-style: dashed;}
Exemplo
Uma borda sólida:
div {border-style: solid;}
Exemplo
Uma borda dupla:
div {border-style: double;}
Exemplo
Uma borda de ranhura:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Exemplo
Uma borda de cume:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Exemplo
Uma borda inserida:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Exemplo
Uma fronteira inicial:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Exemplo
Defina bordas diferentes em cada lado de um elemento:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
Páginas relacionadas
Tutorial CSS: borda CSS
Referência HTML DOM: propriedade borderStyle