Sintassi

Significato dei valori principali:

• length: Imposta la larghezza del bordo in unità di misura come px (pixel), em, rem, ecc. Ad esempio, 5px indica un bordo di 5 pixel di larghezza.

• thin: Imposta una larghezza di bordo sottile, equivalente a circa 1px, ma dipendente dalle impostazioni di visualizzazione.

• medium: Imposta una larghezza di bordo media, che generalmente corrisponde a circa 3px.

• thick: Imposta una larghezza di bordo spessa, che generalmente corrisponde a circa 5px o più.

Esempio proprietà: border-width

Codice Esempio: border-width

CODE: CSS

1. .border-width-example {

2.   width: 300px;

3.   height: 200px;

4.   border-width: 10px; /* Larghezza del bordo su tutti i lati */

5.   border-style: solid; /* Tipo di bordo: solido */

6.   border-color: #50a14f; /* Colore verde per il bordo */

7.   padding: 20px;

8.   background-color: #ff6347;

9.   color: white;

10.   font-size: 22px;

11.   text-align: center;

12.   border-radius: 10px;

13. }

Contenuto Esempio: border-width

  
  <style>
    .border-width-example {
      width: 300px;
      height: 200px;
      border-width: 10px; /* Larghezza del bordo su tutti i lati */
      border-style: solid; /* Tipo di bordo: solido */
      border-color: #50a14f; /* Colore verde per il bordo */
      padding: 20px;
      background-color: #ff6347;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
      box-sizing: border-box;
    }
  </style>
  
  <div class="border-width-example">
      Elemento con bordo spesso 10px
  </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