CSS - estilo de borda

Descrição

A propriedade border-style permite que você selecione um dos seguintes estilos de borda -

none- Sem fronteira. (Equivalente à largura da borda: 0;)
solid - Borda é uma única linha sólida.
dotted - A borda é uma série de pontos.
dashed - Borda é uma série de linhas curtas.
double - A borda é duas linhas sólidas.
groove - A borda parece estar gravada na página.
ridge - A borda parece o oposto do sulco.
inset - Borda faz com que a caixa pareça que está embutida na página.
outset - Borda faz com que a caixa pareça que está saindo da tela.
hidden - O mesmo que nenhum, exceto em termos de resolução de conflito de fronteira para os elementos da tabela.

Você pode alterar individualmente o estilo das bordas inferior, esquerda, superior e direita de um elemento usando as seguintes propriedades -

border-bottom-style - muda o estilo da borda inferior.
border-top-style - muda o estilo da borda superior.
border-left-style - muda o estilo da borda esquerda.
border-right-style - muda o estilo da borda direita.

Valores possíveis

Qualquer um dos valores definidos acima.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

object.style.borderStyle = "Any of the values defined above";

Exemplo

A seguir está o exemplo para mostrar todos esses estilos de borda -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page