Capitolul 3: Introducere în CSSColțuri rotunjite (border-radius)
Cu familia de proprietăți border-radius, se pot seta colțuri rotunjite. Nu mă întrebați de ce s-a ales acest nume și nu ceva mai evident cum ar fi corner-radius.
Atunci când dăm o singură valoare, se vor seta toate cele 4 colțuri, dar avem și proprietăți specifice pentru fiecare colț:
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
De remarcat că nu se pot folosi direcții generice (block, inline, etc.).
border-radius: 1rem;
/* echivalent */
border-top-left-radius: 1rem;
border-top-right-radius: 2rem;
border-bottom-left-radius: 3rem;
border-bottom-right-radius: 4rem;
Toate colțurile border-radius: 1rem 2rem;
/* echivalent */
border-top-left-radius: 1rem;
border-top-right-radius: 2rem;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 1rem;
Colțuri opuse border-radius: 1rem 2rem 3rem;
/* echivalent */
border-top-left-radius: 1rem;
border-top-right-radius: 2rem;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 3rem;
2 colțuri opuse border-radius: 1rem 2rem 3rem 4rem;
/* echivalent */
border-top-left-radius: 1rem;
border-top-right-radius: 2rem;
border-bottom-left-radius: 3rem;
border-bottom-right-radius: 4rem;
Rotunjimi individualeValoarea va reprezenta mărimea rotunjirii, adică raza cercului sau a axelor elipsei după care se face curbarea.
Atunci când folosim procente, aceste procente se referă la mărimea elementului. Asta ne permite să transformăm un element în cerc făcându-l mai întâi pătrat, căruia îi dăm border-radius: 50%.
/* Pătrat cu latura de 5rem */
width: 5rem;
height: 5rem;
/* Cerc cu diametrul de 5rem */
border-radius: 50%;