Cum citești border-radius
Patru numere, în sensul acelor de ceasornic
border-radius: 12px 0 24px 8px înseamnă colțurile stânga sus, dreapta sus, dreapta jos și stânga jos. Ordinea e fixă și începe din stânga sus. Dacă toate patru sunt egale, scrie un singur număr.
Două numere și trei numere
Merg și formele scurte. Două numere înseamnă „stânga sus cu dreapta jos” și „dreapta sus cu stânga jos”. Trei înseamnă stânga sus, apoi perechea de pe diagonală, apoi dreapta jos. În practică un număr sau toate patru se citesc mai ușor.
Procentul nu e același lucru cu pixelii
Procentul se măsoară separat pe orizontală și pe verticală. Deci 50% pe un pătrat dă un cerc, dar pe un dreptunghi de 320 × 200 dă o elipsă: 160 de pixeli pe orizontală, 100 pe verticală. Pixelii nu fac asta – sunt la fel în ambele direcții.
Când browserul micșorează singur razele
Dacă două raze de pe o latură sunt împreună mai lungi decât latura, browserul calculează un factor și micșorează cu el toate patru colțurile, nu doar unul. De aceea un card cu raza 200 la înălțimea 200 arată altfel decât te așteptai: forma rămâne proporțională, dar numerele nu mai sunt cele scrise.
Pastila
Când raza ajunge la jumătate din latura mai scurtă, colțul devine un semicerc și nu se mai schimbă. De aici trucul obișnuit border-radius: 999px pentru un buton-pastilă: orice număr prea mare dă același rezultat.
Întrebări frecvente despre colțurile rotunjite
Cum fac un avatar rotund?
Un element pătrat și border-radius: 50%. Unul nepătrat dă o elipsă – fă mai întâi laturile egale sau adaugă aspect-ratio: 1.
De ce nu se vede rotunjirea pe imaginea din interior?
Un copil nu moștenește forma părintelui. Fie dai imaginii propria rază, fie adaugi overflow: hidden la părinte.
999px sau 50% pentru un buton?
999px. Procentul pe un buton lat face colțurile eliptice și forma se strică; browserul taie o rază în pixeli prea mare până la un semicerc.
Poate raza să difere pe orizontală și pe verticală?
Da, cu o bară oblică: border-radius: 40px / 20px – prima valoare e pe orizontală, a doua pe verticală. Pagina construiește forma simplă, fără bară.
Rotunjirea cu chenar și umbră
Ambele urmează forma automat: chenarul merge pe marginea rotunjită, la fel și umbra. Nu trebuie sincronizat nimic.