Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade border-style define o estilo de quatro bordas de um elemento. Esta propriedade pode ter de um a quatro valores.
Exemplos:
- border-style:dotted solid double dashed;
- borda superior é pontilhada
- borda direita é sólido
- borda inferior é o dobro
- borda esquerda é tracejada
- border-style:dotted solid double;
- borda superior é pontilhada
- bordas direita e esquerda são sólidos
- borda inferior é o dobro
- border-style:dotted solid;
- bordas superior e inferior são pontilhadas
- bordas direita e esquerda são sólidos
- border-style:dotted;
- todas as quatro bordas são pontilhadas
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS1 |
| sintaxe JavaScript: | object .style.borderStyle="dotted double" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Note: O valor "hidden" não é suportado no IE7 e anteriores. IE8 requer um DOCTYPE!. IE9 e apoio depois "hidden" .
CSS Syntax
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| none | Valor padrão. Especifica na borda | Jogue " |
| hidden | O mesmo que "none" , exceto na resolução de conflitos de fronteira para os elementos da tabela | Jogue " |
| dotted | Especifica uma borda pontilhada | Jogue " |
| dashed | Especifica uma borda tracejada | Jogue " |
| solid | Especifica uma borda sólida | Jogue " |
| double | Especifica uma margem dupla | Jogue " |
| groove | Especifica uma borda sulcada 3D. O efeito depende do valor de fronteira-cor | Jogue " |
| ridge | Especifica uma borda ridged 3D. O efeito depende do valor de fronteira-cor | Jogue " |
| inset | Especifica uma borda de inserção 3D. O efeito depende do valor de fronteira-cor | Jogue " |
| outset | Especifica uma fronteira início 3D. O efeito depende do valor de fronteira-cor | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Definir diferentes fronteiras de 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;} Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS Border
HTML DOM de referência: borderStyle property