CSS - stile bordo

Descrizione

La proprietà border-style consente di selezionare uno dei seguenti stili di bordo:

  • none- Nessun confine. (Equivalente alla larghezza del bordo: 0;)

  • solid - Il bordo è una singola linea continua.

  • dotted - Il bordo è una serie di punti.

  • dashed - Border è una serie di linee brevi.

  • double - Il bordo è costituito da due linee continue.

  • groove - Il bordo sembra come se fosse scolpito nella pagina.

  • ridge - Il bordo sembra l'opposto del solco.

  • inset - Bordo fa sembrare la casella incorporata nella pagina.

  • outset - Il bordo fa sembrare che la scatola stia uscendo dalla tela.

  • hidden - Uguale a nessuno, tranne in termini di risoluzione dei conflitti di confine per gli elementi della tabella.

È possibile modificare individualmente lo stile dei bordi inferiore, sinistro, superiore e destro di un elemento utilizzando le seguenti proprietà:

  • border-bottom-style - cambia lo stile del bordo inferiore.

  • border-top-style - cambia lo stile del bordo superiore.

  • border-left-style - cambia lo stile del bordo sinistro.

  • border-right-style - cambia lo stile del bordo destro.

Possibili valori

Uno qualsiasi dei valori definiti sopra.

Si applica a

Tutti gli elementi HTML.

Sintassi DOM

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

Esempio

Di seguito è riportato l'esempio per mostrare tutti questi stili di bordo:

<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>

Questo produrrà il seguente risultato: