Bordi in CSS

Stile del Bordo in CSS

La proprietà border-style specifica quale tipo di bordo mostrare.

I seguenti valori sono ammessi:

• dotted: Definisce un bordo tratteggiato
• dashed: Definisce un bordo a tiretto
• solid: Definisce un bordo solido
• double: Definisce un bordo doppio
• groove: Definisce un bordo incavato in 3D.
• ridge: Definisce un bordo in rilievo in 3D.
• inset: Definisce un bordo in rilievo in 3D.
• outset: Definisce un bordo sporgente in 3D.
• none: Definisce nessun bordo
• hidden: Definisce un bordo nascosto

La proprietà border-style può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).

Larghezza del Bordo in CSS

La proprietà border-width specifica la larghezza dei quattro bordi.

La larghezza può essere impostata come dimensione specifica (in px, pt, cm, em, ecc.) o utilizzando uno dei tre valori predefiniti: thin (sottile), medium (medio) o thick (spesso):

/* Esempio di diverse larghezze di bordo */
p.uno {
  border-style: solid;
  border-width: 5px;
}

p.due {
  border-style: solid;
  border-width: medium;
}

p.tre {
  border-style: dotted;
  border-width: 2px;
}

p.quattro {
  border-style: dotted;
  border-width: thick;
}

Larghezze Specifiche per i Lati

La proprietà border-width può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro):

/* Esempio di larghezze specifiche per i lati */
p.uno {
  border-style: solid;
  border-width: 5px 20px; /* 5px per il bordo superiore e inferiore, 20px sui lati */
}

p.due {
  border-style: solid;
  border-width: 20px 5px; /* 20px per il bordo superiore e inferiore, 5px sui lati */
}

p.tre {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px per il bordo superiore, 10px per il bordo destro, 4px per il bordo inferiore e 35px per il bordo sinistro */
}

Colore del Bordo in CSS

La proprietà border-color viene utilizzata per impostare il colore dei quattro bordi.

Il colore può essere impostato tramite:

• nome: specifica un nome di colore, come “red”
• HEX: specifica un valore HEX, come “#ff0000”
• RGB: specifica un valore RGB, come “rgb(255,0,0)”
• HSL: specifica un valore HSL, come “hsl(0, 100%, 50%)”
• transparent (trasparente)

Se border-color non è impostato, eredita il colore dell’elemento.

/* Esempio di diversi colori di bordo */
p.uno {
  border-style: solid;
  border-color: red;
}

p.due {
  border-style: solid;
  border-color: green;
}

p.tre {
  border-style: dotted;
  border-color: blue;
}

Colori Specifici per i Lati del Bordo

La proprietà border-color può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).

/* Esempio di colori specifici per i lati del bordo */
p.uno {
  border-style: solid;
  border-color: red green blue yellow; /* rosso per il bordo superiore, verde per il bordo destro, blu per il bordo inferiore, giallo per il bordo sinistro */
}

Bordo CSS Scorciatoia

Come hai visto nella pagina precedente, ci sono molte proprietà da considerare quando si tratta di bordi.

Per abbreviare il codice, è anche possibile specificare tutte le proprietà di bordo individuali in una sola proprietà.

La proprietà border è una proprietà abbreviata per le seguenti proprietà di bordo individuali:

• border-width
• border-style
• border-color

/* Esempio di proprietà di bordo abbreviata */
p {
  border: 5px solid red;
}

Bordi Arrotondati in CSS

La proprietà border-radius viene utilizzata per aggiungere bordi arrotondati a un elemento.

/* Esempio di bordi arrotondati */
p {
  border: 2px solid red;
  border-radius: 5px;
}