Generator de border-radius
Trage de glisoare și vezi colțurile rotunjindu-se: toate la fel, fiecare altfel sau eliptic, cu codul CSS cel mai scurt.
Setări
Previzualizare
Ce face
Scrie proprietatea border-radius din CSS Backgrounds 3. Fiecare colț are o rază: un colț circular are aceeași rază pe orizontală și pe verticală, unul eliptic două raze diferite: în cod, razele orizontale vin înaintea barei, cele verticale după ea: 40px 10px / 20px 40px.
Colțurile se scriu în ordinea stânga sus, dreapta sus, dreapta jos, stânga jos. Codul e cel mai scurt posibil, cum permite forma scurtă a proprietății: patru colțuri la fel devin o singură valoare; stânga jos se omite când e egal cu dreapta sus, iar dreapta jos, când în plus e egal cu stânga sus.
Pixeli sau procente
În px, raza rămâne aceeași oricât de mare e elementul. În %, raza orizontală e un procent din lățime, iar cea verticală din înălțime: 50% face un cerc dintr-un pătrat și o elipsă dintr-un dreptunghi.
Formă aleatoare desenează o formă organică: colțuri eliptice în procente, alese astfel încât razele de pe fiecare latură să însumeze 100%. Pentru umbre, vezi generatorul box-shadow.
Întrebări frecvente
Ce se întâmplă dacă razele sunt prea mari?
CSS Backgrounds 3 le micșorează pe toate în aceeași proporție, cât să nu se suprapună colțurile; colțurile ies mai puțin rotunjite decât ai cerut.
Cum fac un buton „pastilă”?
Dă-i o rază în px cel puțin cât jumătate din înălțimea butonului, de exemplu 999px: capetele devin semicercuri.