Nei nostri elementi della pagina HTML possiamo andare a specificare bordi, margini e pudding.

Che cosa sono? Non è così banale come sembra.

Ora ci focalizziamo sui bordi e il resto lo vedremo più avanti.

I bordi chiaramente sono la proprietà piu' semplice e piu' intuitiva, quindi chiaramente posso dare un bordo al mio contenitore.

Quello che non è banale è capire che per impostare la proprietà del bordo devo andare a specificare tre proprietà che sono la dimensione del bordo, lo stile del bordeaux e il colore del bordo.

Quindi posso utilizzare le proprietà border with borders style Border Color.

Per la with posso utilizzare chiaramente le dimensioni.

Come abbiamo visto per la suite dei contenitori per lo stile del bordo ci sono diversi keyword.

Chiaramente il più utilizzato è Sol id che fa una linea continua.

Il board del colore invece è proprio il colore.

Quindi tornando di nuovo i colori si può utilizzare il nome del colore, il codice decimale o il codice RGB.

C'è però la possibilità chiaramente di andare a indicare queste tre proprietà, tutti in un'unica proprietà più semplice e più comoda da scrivere, quindi la proprietà border che riassume in sé border with borders style border color.

Una cosa importante da capire è che lo spessore del bordo si somma alle dimensioni totali del blocco per stabilire lo spazio occupato nella pagina.

Che cosa significa? Significa che se noi diamo delle dimensioni al nostro contenitore e aggiungiamo il bordo, il bordeaux andrà ad occupare tanti pixel in più.

Quanto sarà chiaramente il border with? Abbiamo sempre il nostro dive adesso, per fare questi esempi possiamo utilizzare anche delle dimensioni fisse.

Quindi ad esempio una suite di cinquecento pixel é una hit di trecento pixel.

Ad esempio questo è un rettangolo.

Prendiamo la nostra pagina, aggiorniamo e questo è il nostro dio.

Se andassimo ad aggiungere appunto un bordo al nostro rettangolo, avremmo utilizzando lo short handed tre pixel solid black.

Aggiorno la pagina e compare appunto tutto il bordo tutto intorno al mio contenitore.

Per capire meglio questa cosa che il bordo aumenta la dimensione del del mio contenitore posso andare a giocare sempre con gli strumenti per lo sviluppatori, quindi dove trovo la mia proprietà border? Se io vado a deselezionare la checkbox, questo bordo scompare andando a Rick cliccare il bordo compare e si vede che proprio il bordo si aggiunge alla dimensione del blocco e quindi va ad aumentare le dimensioni del mio div.

È possibile andare a specificare un lato alla volta.

Quindi, se necessario possiamo andare a indicare ad esempio, solamente il bordo superiore border-top bordo di destra border-right bordo di sinistra border left e border-bottom chiaramente il bordo inferiore.

Se necessario possiamo indicarne solamente uno.

Quindi se ad esempio volessimo solamente un bordo superiore un bordo inferiore, possiamo indicarli tutti e quattro separati se li volessimo tutti diversi.

Quindi chiaramente questi sono tutti gli strumenti che il css ci da' a disposizione.

Non siamo obbligati ad usarli tutti.

Però se ad esempio nell'esempio di prima, anziché mettere border tre pixel solid black, io andassi a mettere border bottom tre pixel solid black.

Commentiamo la riga precedente al giorno, quindi ora il mio bordo compare solo appunto nel bordo inferiore, mentre i lati il bordo superiore non compaiono.

È possibile poi gestire le proprietà dei bordi accoppiate o in gruppo, ossia se si specificano due valori si stanno raggruppando i lati superiore e inferiore con il primo valore e i lati destro e sinistro con il secondo valore.

Quindi questi sono esempi chiaramente border style solid dott.

Reed significa che il bordo superiore inferiore sarà una linea continua, mentre il bordo di destra e di sinistra saranno dei puntini.

Quindi una linea punti nata.

Possiamo andare a specificare tre valori.

In questo caso stiamo dividendo il lato superiore, poi il lato destro e sinistro con il secondo valore e il terzo valore rappresenta il lato inferiore.

Quindi in questo esempio viene utilizzato il border with.

Chiaramente.

Tutte queste proprietà possono essere utilizzate con tutte le proprietà dei bordi, quindi border with due pixel lato superiore cinque pixel destra e sinistra dieci pixel lato inferiore.

Se invece andiamo a specificare quattro valori, stiamo dividendo tutti quanti i quattro lati.

Come funziona Con quattro valori con quattro valori si parte sempre dal bordo superiore e si va in senso orario, quindi il lato superiore, lato destro, il lato inferiore e lato sinistro.

Quindi in questo caso abbiamo l'esempio con il border color, quindi il bordo superiore sarà blu, il bordo di destra arancione, il bordo inferiore viola e il bordo di sinistra verde.

Vediamo degli esempi con queste proprietà miste, quindi se ad esempio prendiamo sempre il nostro riquadro di poco fa, commentiamo questo border-bottom e proviamo a mettere ad esempio borders tyler abbiamo detto so lead ed questo significa che sopra e sotto avrò il bordo continuo e a destra e sinistra avrò il bordo punti nato.

Se vado a dare border with con tre valori, quindi tre pixel, cinque pixel, dieci pixel, stiamo dando dei valori differenti il primo per il bordo superiore, il secondo per i bordi laterali, sia destro che sinistro e il terzo valore sarà il bordo inferiore.

Infatti vediamo che questo è molto più spesso.

Poi abbiamo visto i quattro valori, lo facciamo con la proprietà border color, ma chiaramente si può utilizzare su tutte le proprietà, quindi possiamo mettere ad esempio blue green.

Non ricordo ovviamente l'ordine delle slide per paul e orange.

Quindi mettendo quattro colori stiamo andando a impostare con il primo valore il bordo superiore e poi si va in senso orario, quindi il secondo valore a bordo di destra.

Terzo valore bordo inferiore guardo valore a bordo di sinistra.

Infine c' è la possibilità di sfondare gli angoli, quindi se non ci piacciono i divx squadrati non ci piacciono gli spigoli, possiamo andare a sfondare gli angoli utilizzando la proprietà border-radius.

Anche la proprietà border-radius si può impostare con unità di misura pixel o con la percentuale.

Quindi applicando border-radius di dieci pixel significa che l'angolo verrà stondati utilizzando un raggio di dieci pixel.

Se invece si utilizza la percentuale si fa sempre riferimento al contenitore.

Vediamo anche qui un esempio riprendendo il nostro contenitore potremmo andare ad applicare border-radius di dieci pixel ad esempio e vedremo che il nostro rettangolo non è più squadrato ma gli angoli stondati.

Se ad esempio volessimo fare un cerchio perfetto potremmo creare un divx.

Assegniamo una classe specifica questo div perché altrimenti se non avesse una classe chiaramente per prenderebbe tutte le proprietà che abbiamo specificato poco fa per vivere ora andiamo a creare un selettore più specifico quindi diamo sempre delle dimensioni fisse perché stiamo facendo degli esempi.

Quindi wilt hit trecento pixel per trecento pixel possiamo dare sempre un background-color in questo caso diamolo blu così lo distinguiamo e abbiamo il nostro contenitore.

Che cosa sta succedendo? Sta prendendo tutte le proprietà del border style border-radius che abbiamo definito per il selettore, quindi sta prendendo le dimensioni e il colore di sfondo in base a il selettore? Sì e poi sta prendendo tutte le altre proprietà che non sono specificate nella regola con selettore circle le sta prendendo dal selettore di generico.

Quindi, per non mescolare le cose aggiungiamo una classe a questo dive.

Ad esempio Rex Lango così non va a sovrascrivere nulla.

Ora aggiorniamo la pagina e troviamo appunto il nostro quadrato blu che non ha più i bordi.

Ora, se volessimo creare un cerchio perfetto avendo dato larghezza e altezza uguali, possiamo dare il border-radius al cinquanta percento e voi la otteniamo un cerchio perfetto fatto con il css.