Sintassi

Significato dei valori principali:

• none: nessun bordo inferiore (rimuove il bordo).

• solid: bordo inferiore solido, continuo.

• dotted: bordo inferiore tratteggiato.

• dashed: bordo inferiore tratteggiato con linee più lunghe rispetto al bordo tratteggiato.

• double: bordo inferiore doppio, composto da due linee solide.

• groove: bordo inferiore in stile scanalato, con un effetto 3D.

• ridge: bordo inferiore in stile cresta, anche con effetto 3D ma opposto a **groove**.

• inset: bordo inferiore che crea un effetto di incassamento.

• outset: bordo inferiore che crea un effetto di rilievo.

Esempio proprietà: border-bottom-style

Codice Esempio: border-bottom-style

CODE: CSS

1. .border-bottom-style-example {

2.   border-bottom-style: solid;   /* Definiamo lo stile del bordo inferiore */

3.   border-bottom-width: 5px;     /* Definiamo la larghezza del bordo inferiore */

4.   border-bottom-color: #50a14f; /* Definiamo il colore del bordo inferiore */

5.   padding: 20px;

6.   background-color: #ff6347;

7.   color: white;

8.   font-size: 22px;

9.   text-align: center;

10.   border-radius: 10px;

11. }

Contenuto Esempio: border-bottom-style

  
  <style>
    .border-bottom-style-example {
      width: 300px;
      height: 150px;
      border-bottom-style: dotted;      /* Stile dotted per il bordo inferiore */
      border-bottom-width: 5px;         /* Larghezza del bordo inferiore */
      border-bottom-color: #000000;     /* Colore nero per il bordo inferiore */
      padding: 20px;
      background-color: #ff6347;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
      box-sizing: border-box;           /* Per includere bordo e padding nelle dimensioni */
    }
  </style>
  <div class="border-bottom-style-example">
    Bordo inferiore solido
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser