Bordo di ogni lato CSS

Bordi CSS - Bordo singolo

Dall'esempio del capitolo precedente, avete visto che è possibile specificare bordi diversi per ogni lato.

In CSS, ci sono alcune proprietà che possono essere utilizzate per specificare ogni bordo (superiore, destro, inferiore e sinistro):

Esempio

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Risultato:

Stili di bordo diversi

Prova te stesso

Stili di bordo diversi

Il risultato dell'esempio precedente è lo stesso:

Esempio

p {
  border-style: dotted solid;
}

Prova te stesso

Il suo principio di funzionamento è questo:

Se border-style Le impostazioni delle proprietà sono quattro valori:

border-style: dotted solid double dashed;

  • Il bordo superiore è a tratteggi
  • Il bordo destro è a linea solida
  • Il bordo inferiore è a doppia linea
  • Il bordo sinistro è a tratteggi

Se border-style Le impostazioni delle proprietà sono tre valori:

border-style: dotted solid double;

  • Il bordo superiore è a tratteggi
  • I bordi destro e sinistro sono linee solide
  • Il bordo inferiore è a doppia linea

Se border-style L'attributo imposta due valori:

border-style: dotted solid;

  • I bordi superiore e inferiore sono tratteggiati
  • I bordi destro e sinistro sono linee solide

Se border-style L'attributo imposta un valore:

border-style: dotted;

  • Tutti i lati sono tratteggiati

Esempio

/* Quattro valori */
p {
  border-style: dotted solid double dashed; 
}
/* Tre valori */
p {
  border-style: dotted solid double; 
}
/* Due valori */
p {
  border-style: dotted solid; 
}
/* Un valore */
p {
  border-style: dotted; 
}

Prova te stesso

Negli esempi precedenti è stato utilizzato border-style Proprietà. Ma border-width e border-color Anche questo si applica.