Utilizzare i bordi con i CSS: border-radius e border-image - WeSchool


Abbiamo già visto in altre lezioni come sia possibile impostare un bordo e come rendere gli angoli arrotondati. In questa lezione andremo a vedere alcuni concetti avanzati per costruire angoli arrotondati e anche come sia possibile utilizzare le nostre immagini come dei bordi.
 
L’ultima volta che abbiamo visto la proprietà 
border-radius
 avevamo questi valori:
 
  #angoli-arrotondati {        border-radius: 15px 45px 25px 70px  }
 
In questo modo siamo in grado di impostare il raggio dei vari angoli partendo da quello in alto a sinistra per arrivare a quello in basso a sinistra. Questo ci permette di creare delle curve molto lineari ma come potremmo fare se volessimo personalizzare il 
tipo
 di curva realizzato?





















Videolezione "Background CSS, sfondi multipli e il loro utilizzo in una pagina HTML"

























    const isRelatedVideo = 1;

 
Anche questa volta gli sviluppatori CSS ci hanno fornito la soluzione! Tutto quello che dovremmo è utilizzare una delle seguenti sintassi:
 
  #arrotondati {       /* Applico la regola ad un solo angolo */       border-top-left-radius: 20px 40px;       /* Applico la regola a tutti gli angoli */       border-radius: 20px 40px / 5px 15px 40px 60px;  }
 
Come possiamo notare gli approcci principali sono due, il primo definisce l’inserimento di due valori per ogni angolo oppure possiamo decidere di usare soltanto la proprietà 
border-radius
 e applicare prima i valori orizzontali e successivamente quelli verticali.
 
Ma perché sto parlando degli assi orizzontali e verticali? Semplicemente perché, come vediamo dall’immagine sottostante, il primo valore che viene accettato viene applicato raggio orizzontale del nostro angolo mentre il secondo si riferisce al raggio verticale.
 
 
Lo stesso discorso di applica con la proprietà generale 
border-radius
, che rispetta la sintassi generale, ma serve un backslash 
/
 per separare i valori orizzontali da quelli verticali.
 
Oltre a questa novità voglio introdurvi velocemente alla possibilità di utilizzare delle immagini per i propri bordi. La magia è svolta dalla proprietà 
border-image
 e questa è la sua sintassi:
 
  #immagine {        border-image: url('border.jpg') 2;
 
Veramente semplice giusto? Tutto quello che dobbiamo fare è specificare dove si trova l’immagine per il nostro bordo e specificare la distanza (in pixel) necessaria per costruire il bordo.
 
Se volete uno strumento semplice per creare le vostre cornici provate ad utilizzare il 
Border Image Generator
, strumento gratuito molto utile ed interessante per scoprire la sintassi di questa regola.

