Propriedade border-style

A propriedade border-style define o estilo da borda para todos os lados simultaneamente ou separadamente para cada lado. É uma propriedade abreviada para as seguintes propriedades: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaxe

seletor {
	border-style: valor;
}

Valores

Valor	Descrição
`solid`	Linha sólida.
`dotted`	Borda pontilhada.
`dashed`	Borda tracejada.
`ridge`	Borda em relevo (convexa).
`double`	Borda dupla. Para ver o efeito, a espessura da borda deve ser de pelo menos `3px`.
`groove`	Borda em sulco (côncava).
`inset`	Borda rebaixada (para dentro).
`outset`	Borda elevada (para fora).
`none`	Ausência de borda.

Valor padrão: none.

Quantidade de valores

A propriedade pode receber 1, 2, 3 ou 4 valores, especificados com espaços:

Quantidade	Descrição
`1`	Estilo para todos os lados simultaneamente.
`2`	Primeiro valor para o topo e a base, segundo - para as bordas esquerda e direita.
`3`	Primeiro valor para o topo, segundo - para as bordas esquerda e direita, terceiro - para a base.
`4`	Primeiro valor para a borda superior, segundo - para a direita, terceiro - para a inferior, quarto - para a borda esquerda.

Exemplo . Valor solid

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor dotted

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor dashed

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor ridge

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor double

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor groove

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor inset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo . Valor outset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Neste exemplo, são definidos tipos diferentes de borda para lados diferentes do elemento:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Agora, para lados diferentes do elemento, também são definidas espessuras e cores diferentes para a borda:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Exemplo

Agora, para as bordas superior e inferior, foi definido o tipo solid, e para as bordas direita e esquerda - dotted:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Veja também

a propriedade border-color,
que define a cor da borda
a propriedade border-width,
que define a espessura da borda
a propriedade border,
que é a propriedade abreviada para a borda