CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-bottom-width

La proprietà CSS border-bottom-width definisce la larghezza del bordo inferiore

La proprietà border-bottom-width consente di definire la larghezza del bordo inferiore di un elemento. È possibile utilizzare valori fissi come **px** o **em**, oppure parole chiave come **thin**, **medium** o **thick** per avere un controllo più semplificato sulla larghezza del bordo.

Sintassi

border-bottom-width: length | thin | medium | thick;

Significato dei valori principali:

  • length: valore numerico con unità di misura (ad esempio, 5px, 1em, ecc.).

  • thin: larghezza del bordo inferiore sottile.

  • medium: larghezza del bordo inferiore di larghezza media (è il valore predefinito se non viene specificato altro).

  • thick: larghezza del bordo inferiore spessa.


Esempio proprietà: border-bottom-width


Codice Esempio: border-bottom-width

CODE: CSSpreleva codice
  1. .border-bottom-width-example {
  2.   border-bottom-width: 10px;    /* Impostiamo la larghezza del bordo inferiore */
  3.   border-bottom-style: solid;   /* Impostiamo lo stile del bordo inferiore */
  4.   border-bottom-color: #50a14f; /* Impostiamo 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. }

Risultato: border-bottom-width

Contenuto esempio...

Esempio di utilizzo di border-bottom-width

In questo esempio, la proprietà border-bottom-width viene utilizzata per definire la larghezza del bordo inferiore di un elemento:


Bordo inferiore con larghezza personalizzata

CSS per l'elemento con bordo inferiore:

  
  <style>
    .border-bottom-width-example {
      width: 300px;
      height: 150px;
      border-bottom-width: 10px;      /* Larghezza del bordo inferiore */
      border-bottom-style: solid;     /* Stile del bordo inferiore */
      border-bottom-color: #50a14f;   /* Colore verde del 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 nella dimensione totale */
    }
  </style>
  <div class="border-bottom-width-example">
    Bordo inferiore con larghezza personalizzata
  </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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies