Le proprietà dei bordi

Queste proprietà consentono di specificare lo stile, l'ampiezza e il colore del bordo di un elemento.

Lo stile dei bordi

La proprietà border-style specifica che tipo di bordo da visualizzare

Sono consentiti i seguenti valori:

• dotted - Definisce un bordo a punti
• dashed - Definisce un bordo a trattini
• solid - Definisce un bordo solido
• double - Definisce un bordo doppio.
• groove - Definisci un bordo 3D a scanalatura. L'effetto dipende dal valore border-color
• ridge - Definisce un bordo 3D a cresta. L'effetto dipende dal valore border-color
• inset - Definisce un bordo 3D inset. L'effetto dipende dal valore border-color
• outset - Definisce un bordo 3D outset. L'effetto dipende dal valore border-color
• none - Definisce nessun bordo
• hidden - Definisce un bordo nascosto

Visualizza esempi

CSS Border Width

Questa proprietà specifica la larghezza dei quattro bordi.

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

Esempio

Dimostrazione delle diverse larghezze del bordo:

    
p.one {
    border-style: solid;
    border-width: 5px;
}

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

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

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

Visualizza esempi

Larghezze specifiche dei lati

La proprietà border-width può avere da uno a quattro valori (per il bordo superiore, a destra, sotto e a sinistra):

Esempio

p.one {
    border-style: solid;
    border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
    border-style: solid;
    border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
    border-style: solid;
    border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

CSS Border Color

Questa proprietà è usata per impostare il colore dei quattro bordi

Il colore può essere impostato da:

• nome, specifica un nome del 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%)"
• trasparent

Esempio

Dimostrazione dei diversi colori del bordo:

p.one {
    border-style: solid;
    border-color: red;
}

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

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

Visualizza esempio

Colori specifici dei lati

La proprietà border-color può avere da uno a quattro valori (per il bordo superiore, a destra, sotto e a sinistra).

Esempio

p.one {
    border-style: solid;
    border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Visualizza esempio

Valori HEX

Esempio

p.one {
    border-style: solid;
    border-color: #ff0000; /* red */
}

Valori RGB

Esempio

p.one {
    border-style: solid;
    border-color: rgb(255, 0, 0); /* red */
}

Valori HSL

Esempio

p.one {
    border-style: solid;
    border-color: hsl(0, 100%, 50%); /* red */
}

Bordi in CSS - Lati individuali

In CSS ci sono anche delle proprietà per specificare ciascuno dei bordi (superiore, destro, inferiore, sinistro):

Esempio

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

Visualizza esempio

Si può ottenere lo stesso risultato anche così:

p {
    border-style: dotted solid;
}

Ecco come funziona

Se la proprietà border-style ha 4 valori:

• border-style: dotted solid double dashed;
  • Il bordo superiore è puntato
  • il bordo destro è solido
  • il bordo inferiore è doppio
  • il bordo sinistro è a linee

Se la proprietà border-style ha 3 valori:

• border-style: dotted solid double;
  • il bordo superiore è puntato
  • i bordi destro e sinistro sono solidi
  • il bordo inferiore è doppio

Se la proprietà border-style ha 2 valori:

• border-style: dotted solid;
  • i bordi superiore e inferiore sono puntati
  • i bordi destro e sinistro sono solidi

Se la proprietà border-style ha 1 valore:

• border-style: dotted;
  • tutti e quattro i bordi sono puntati

Esempio

/* Four values */
p {
    border-style: dotted solid double dashed;
}

/* Three values */
p {
    border-style: dotted solid double;
}

/* Two values */
p {
    border-style: dotted solid;
}

/* One value */
p {
    border-style: dotted;
}  

Bordi CSS - Proprietà abbreviata

Come visto, ci sono molte proprietà da considerare quando gestiamo i bordi.

Per ridurre il codice, è anche possibile specificare tutte le proprietà individuali dei bordi in una sola proprietà.

La proprietà border è una proprietà abbreviata per le seguenti proprietà individuali dei bordi:

• border-width
• border-style (richiesta)
• border-color

Esempio

p {
    border: 5px solid red;
}

Si può anche specificare tutte le proprietà individuali dei bordi per solo un lato:

Bordo Sinistro

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

Bordo inferiore

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

Bordi arrotondati CSS

La proprietà border-radius è usata per aggiungere angoli arrotondati a un elemento:

Esempio

p {
    border: 2px solid red;
    border-radius: 5px;
}

Tutte le proprietà del bordo in CSS