CodeKitHubCe este acest instrument?
border-radius este proprietatea CSS care rotunjește colțurile unui element. Scris manual, ia patru valori într-o ordine fixă — stânga-sus, dreapta-sus, dreapta-jos, stânga-jos — ordine ușor de încurcat, mai ales când cele patru colțuri diferă.
Acest instrument elimină ghicitul: mișcă un slider, urmărește colțul rotunjindu-se în previzualizarea live și citește CSS-ul exact din caseta de cod generată. Un singur comutator de blocare trece între o rază uniformă (toate cele patru colțuri identice, cazul cel mai comun) și patru sliders independente pentru forme organice, asimetrice.
De ce să-l folosești?
- Previzualizare live actualizată instant pe măsură ce tragi — fără să editezi CSS și să reîmprospătezi pentru a vedea rezultatul.
- Blocare cu un clic pentru cazul comun „aceeași rază pe fiecare colț”; deblochează pentru butoane pilulă, baloane de vorbire și forme organice.
- Generează forma prescurtată cu o singură valoare când toate colțurile se potrivesc, sau forma completă cu patru valori când nu se potrivesc — gata de copiat oricum.
- Rulează complet în browserul tău. Nimic din ce introduci nu este trimis nicăieri.
- Gratuit, fără înregistrare, funcționează pe mobil.
Cum se folosește
- Lasă bifat „blochează toate colțurile” și trage orice slider pentru a seta o rază uniformă pentru toată caseta.
- Debifează blocarea pentru a controla fiecare colț independent — util pentru forme de pilulă, picături și carduri asimetrice.
- Urmărește caseta de previzualizare actualizându-se live pe măsură ce ajustezi fiecare slider.
- Copiază CSS-ul generat din caseta de cod și lipește-l în foaia ta de stiluri.
Exemplu
Intrare
Stânga-sus: 40px, Dreapta-sus: 8px, Dreapta-jos: 40px, Stânga-jos: 8pxRezultat
border-radius: 40px 8px 40px 8px;Colțuri opuse nepotrivite ca acestea creează un contur de frunză sau petală — un efect comun în designul de carduri și insigne.
px sau % — ce unitate ar trebui să folosesc?
Acest generator produce valori în pixeli, ceea ce este alegerea implicită corectă pentru majoritatea muncii de interfață: butoane, carduri și câmpuri unde vrei o rază de colț fixă, previzibilă, indiferent de dimensiunea elementului.
Procentele se comportă diferit — sunt relative la propria lățime și înălțime a elementului, deci o rază de 50% pe un element pătrat produce un cerc perfect, iar pe un element non-pătrat produce o elipsă. Dacă vrei acest efect (avatare, forme organice care se scalează cu containerul), ia CSS-ul generat și înlocuiește manual valorile px cu o valoare % — de exemplu border-radius: 50% transformă orice casetă pătrată într-un cerc.
Modele comune de border-radius
- Card rotunjit: toate colțurile egale, aproximativ 8–16px pentru componente de interfață.
- Buton pilulă: setează raza la jumătate din înălțimea elementului (sau folosește pur și simplu 9999px, care se plafonează automat la o pilulă completă indiferent de înălțime).
- Avatar circular: border-radius: 50% pe un element pătrat (lățime și înălțime egale).
- Balon de vorbire: trei colțuri rotunjite, unul ascuțit — setează trei slidere sus și unul la 0.
- Formă de frunză / petală: colțuri opuse potrivite, colțuri adiacente diferite — de exemplu stânga-sus și dreapta-jos ambele mari, dreapta-sus și stânga-jos ambele mici.
Combinarea cu o umbră
Colțurile rotunjite rareori apar singure — cardurile și butoanele au de obicei nevoie și de puțină umbră pentru profunzime. Folosește Generatorul de Box Shadow pentru a regla o umbră proiectată și aplică ambele bucăți de CSS generat pe același element.
Întrebări frecvente
Care este diferența dintre border-radius și ordinea colțurilor?
Prescurtarea CSS urmează întotdeauna ordinea stânga-sus, dreapta-sus, dreapta-jos, stânga-jos, în sensul acelor de ceasornic începând din stânga-sus. Cele patru sliders ale acestui instrument sunt etichetate în consecință, deci nu trebuie să ții minte ordinea singur.
Pot folosi unități diferite pentru fiecare colț?
Da, în CSS real poți combina px, %, em și rem între colțuri, deși e rar în practică. Acest instrument generează valori uniforme în px pentru simplitate — schimbă orice valoare individuală în % sau altă unitate direct în foaia ta de stiluri, dacă ai nevoie de unități mixte.
De ce border-radius: 50% face uneori un oval în loc de cerc?
Pentru că procentele sunt relative la fiecare axă independent — raza orizontală este un procent din lățimea elementului, raza verticală un procent din înălțimea sa. Pe un element pătrat (lățime și înălțime egale) asta produce un cerc perfect; pe un dreptunghi produce o elipsă.
Border-radius afectează și imaginile de fundal și marginile?
Da — border-radius decupează fundalul elementului, marginea și (în browserele moderne) umbra sa box-shadow la forma rotunjită. Nu decupează conținutul copil care depășește granițele, decât dacă setezi și overflow: hidden pe elementul părinte.
Există o limită la cât de mare poate fi raza?
Nicio limită fixă — dacă raza depășește jumătate din lățimea sau înălțimea elementului, browserele o plafonează astfel încât cele două curbe de pe acea parte se întâlnesc exact la mijloc, exact cum un pătrat devine un cerc perfect sau o formă de pilulă.
Cum fac o formă de pilulă sau un cerc perfect?
Pentru o formă de pilulă (capsulă), setează raza la cel puțin jumătate din înălțimea elementului — trucul comun este border-radius: 9999px, care funcționează la orice înălțime pentru că browserul plafonează automat curba. Un cerc perfect are nevoie de două lucruri: lățime și înălțime egale, plus border-radius: 50%.