CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-left-color

La proprietà CSS border-left-color imposta il colore del bordo sinistro

La proprietà border-left-color consente di specificare il colore del bordo sinistro di un elemento. Può essere utilizzato insieme ad altre proprietà di bordo come border-left-width e border-left-style per ottenere un controllo completo sul design del bordo sinistro.

Sintassi

border-left-color: color;

Significato dei valori principali:

  • color: specifica il colore del bordo sinistro. Può essere espresso in vari formati, come il nome del colore (es. red), il formato esadecimale (#ff6347), RGB (rgb(255,99,71)), ecc.


Esempio proprietà: border-left-color


Codice Esempio: border-left-color

CODE: CSSpreleva codice
  1. .border-left-color-example {
  2.   width: 300px;
  3.   height: 200px;
  4.   border-left: 5px solid; /* Definisce la larghezza e lo stile del bordo */
  5.   border-left-color: #50a14f; /* Colore del bordo sinistro impostato su verde */
  6.   padding: 20px;
  7.   background-color: #ff6347;
  8.   color: white;
  9.   font-size: 22px;
  10.   text-align: center;
  11.   border-radius: 10px;
  12. }

Contenuto Esempio: border-left-color

Esempio di utilizzo di border-left-color

In questo esempio, la proprietà border-left-color viene utilizzata per cambiare il colore del bordo sinistro di un elemento. Affinché il bordo sia visibile, è necessario specificarne anche la larghezza e lo stile.


Elemento con colore del bordo sinistro personalizzato

CSS e HTML per l'elemento con colore del bordo sinistro personalizzato:

  
  <style>
    .border-left-color-example {
      width: 300px;
      height: 200px;
      border-left-width: 15px; /* Larghezza del bordo sinistro */
      border-left-style: solid; /* Stile del bordo */
      border-left-color: #ff6347; /* Colore rosso per il bordo sinistro */
      padding: 20px;
      background-color: #333;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  
  <div class="border-left-color-example">
    Elemento con colore del bordo sinistro personalizzato
  </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