Bordi

Podcast su CSS - 016: Borders

Nel modulo Box model, abbiamo considerato un'analogia con i frame per descrivere ogni sezione del modello box.

La casella del bordo è il frame dei riquadri e le proprietà border offrono una vasta gamma di opzioni per creare quel frame in quasi tutti gli stili che ti vengono in mente.

Proprietà bordo

Le singole proprietà border consentono di applicare uno stile alle varie parti di un bordo.

Stile

Affinché un bordo venga visualizzato, devi definire la border-style. Puoi scegliere tra alcune opzioni:

Quando utilizzi gli stili ridge, inset, outset e groove, il browser scurisce il colore del bordo del secondo colore mostrato per fornire contrasto e profondità. Questo comportamento può variare da un browser all'altro, soprattutto per i colori scuri come black. In Chrome, gli stili dei bordi sembreranno a tinta unita e in Firefox verranno schiariti per ottenere un secondo colore più scuro.

Il comportamento del browser può variare anche per altri stili di bordo, pertanto è importante testare il sito in browser diversi. Un esempio comune di questa differenza è il modo in cui ogni browser esegue il rendering degli stili dotted e dashed.

Per impostare lo stile del bordo su ogni lato della casella, puoi utilizzare border-top-style, border-right-style, border-left-style e border-bottom-style.

Sintesi

Come con margin e padding, puoi utilizzare la proprietà abbreviata border per definire tutte le parti del confine in un'unica dichiarazione.

.my-element {
    border: 1px solid red;
}

L'ordine dei valori nell'abbreviazione border è border-width, border-style e poi border-color.

Colore

Puoi impostare il colore su tutti i lati della scatola o su ogni singolo lato con border-color. Per impostazione predefinita, viene utilizzato il colore del testo corrente della casella: currentColor. Ciò significa che se dichiari solo le proprietà del bordo, come la larghezza, il colore sarà quel valore calcolato, a meno che non lo imposti esplicitamente.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Per impostare un colore del bordo su ciascun lato della casella, utilizza border-top-color, border-right-color, border-left-color e border-bottom-color.

Larghezza

La larghezza di un bordo indica lo spessore della linea ed è controllata da border-width. La larghezza predefinita del bordo è medium. Tuttavia, non sarà visibile se non definisci uno stile. Puoi utilizzare altre larghezze denominate, ad esempio thin e thick.

Le proprietà border-width accettano anche un'unità di lunghezza come px, em, rem o %. Per impostare la larghezza del bordo su ciascun lato della casella, utilizza border-top-width, border-right-width, border-left-width e border-bottom-width.

Proprietà logiche

Nel modulo Proprietà logiche hai scoperto come fare riferimento al flusso a blocchi e al flusso incorporato, anziché come i lati espliciti in alto, a destra, in basso o a sinistra.

Questa funzionalità è disponibile anche per i bordi:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

In questo esempio, .my-element ha tutti i lati definiti con un bordo punteggiato 2px che è il colore del testo corrente. Il bordo inline-end viene quindi definito come 2px, in tinta unita e rosso. Ciò significa che nelle lingue da sinistra a destra, come l'inglese, il bordo rosso sarà posizionato sul lato destro della casella. Nelle lingue con orientamento da destra a sinistra, come l'arabo, il bordo rosso si trova sul lato sinistro della casella.

Il supporto del browser per le proprietà logiche nei bordi è vario, quindi assicurati di verificarne il supporto prima dell'uso.

Raggio bordo

Per applicare a un riquadro gli angoli arrotondati, utilizza la proprietà border-radius.

.my-element {
    border-radius: 1em;
}

Questa scorciatoia aggiunge un bordo coerente a ogni angolo della casella. Come per le altre proprietà del bordo, puoi definire il raggio del bordo per ogni lato con border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.

Puoi anche specificare il raggio di ogni angolo nella forma abbreviata, che segue l'ordine: in alto a sinistra, in alto a destra, in basso a destra e poi in basso a sinistra.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Se definisci un singolo valore per un angolo, usi un'altra scorciatoia perché il raggio del bordo è diviso in due parti: il lato verticale e il lato orizzontale. Ciò significa che quando imposti border-top-left-radius: 1em, imposti il raggio in alto a sinistra-superiore e il raggio in alto a sinistra-sinistra.

Puoi definire entrambe le proprietà, per ogni angolo, in questo modo:

.my-element {
    border-top-left-radius: 1em 2em;
}

Questo aggiunge un valore border-top-left-top pari a 1em e un valore border-top-left-left pari a 2em. Questo converte il raggio del bordo superiore sinistro in un raggio ellittico, anziché nel raggio circolare predefinito.

Puoi definire questi valori nell'abbreviazione border-radius, utilizzando / per definire i valori dell'ellittica, dopo i valori standard. In questo modo puoi dare sfogo alla tua creatività e creare forme complesse.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Immagini bordo

Non è sufficiente utilizzare un bordo basato sul tratto in CSS. Puoi anche utilizzare qualsiasi tipo di immagine, utilizzando border-image. Questa proprietà abbreviata ti consente di impostare l'immagine di origine, la modalità di suddivisione, la larghezza dell'immagine, la distanza del bordo dal bordo e la modalità di ripetizione.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

La proprietà border-image-width simile a border-width: è il modo in cui imposti la larghezza dell'immagine del bordo. La proprietà border-image-outset consente di impostare la distanza tra l'immagine del bordo e la casella che circonda l'immagine.

border-image-source

border-image-source (origine dell'immagine del bordo) può essere un url per qualsiasi immagine valida, incluse le sfumature CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

La proprietà border-image-slice è una proprietà utile che ti consente di suddividere un'immagine in 9 parti costituite da 4 linee divisa. Funziona come l'abbreviazione margin, dove definisci il valore di offset superiore, destro, inferiore e sinistro.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Una volta definiti i valori di offset, hai 9 sezioni dell'immagine: 4 angoli, 4 bordi e una sezione centrale. Gli angoli vengono applicati agli angoli dell'elemento con l'immagine del bordo. I bordi vengono applicati ai bordi dell'elemento. La proprietà border-image-repeat definisce il modo in cui questi bordi riempiono il loro spazio, mentre la proprietà border-image-width controlla la dimensione delle sezioni.

Infine, la parola chiave fill determina se la sezione centrale, lasciata dalla suddivisione, viene utilizzata o meno come immagine di sfondo dell'elemento.

border-image-repeat

border-image-repeat è il modo in cui indichi al CSS come vuoi che l'immagine del bordo si ripeta. Funziona come background-repeat.

• Il valore iniziale è stretch, che estende l'immagine di origine per riempire lo spazio disponibile, ove possibile.
• Il valore repeat affianca i bordi dell'immagine di origine il maggior numero possibile di volte e può tagliare le regioni perimetrali per ottenere questo risultato.
• Il valore round equivale a ripetere l'azione, ma invece di tagliare le aree del bordo dell'immagine per adattarle il maggior numero possibile, allunga l'immagine e la ripete per ottenere una ripetizione senza interruzioni
• Il valore space è di nuovo uguale alla ripetizione, ma questo valore aggiunge spazio tra ogni area perimetrale per creare un pattern senza soluzione di continuità.

Verifica la tua comprensione

Verifica le tue conoscenze sui confini

.my-element {
  border: solid hotpink;
}