border-radius în CSS

border-radius: 8px;              /* toate colțurile */
border-radius: 50%;             /* cerc perfect (dacă lățimea = înălțimea) */
border-radius: 9999px;          /* formă de pastilă (pill button) */
border-radius: 12px 12px 0 0;   /* sus-stânga, sus-dreapta rotunjite */

Ce face border-radius

border-radius adaugă curburi estetice la colțurile oricărui element HTML.

Trei cazuri frecvente în designul modern:
1. Colțuri fine: border-radius: 6px sau 8px pentru carduri și butoane moderne.
2. Cerc complet: border-radius: 50% aplicat pe un element pătrat (ex. avatar de utilizator sau iconiță).
3. Buton pastilă: border-radius: 9999px pentru butoane rotunjite complet la capete.

Valori uzuale

Valoare	Descriere
px, rem	Raza cercului de curbură al colțului.
50%	Creează o elipsă sau un cerc perfect.
4 valori	Ordine: sus-stânga, sus-dreapta, jos-dreapta, jos-stânga.

Exemple

Exemplul 1: Imagine de profil rotundă și buton pastilă

50% pe imagini pătrate creează cercuri perfecte.

img.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.buton-rotund {
  padding: 10px 24px;
  border-radius: 9999px;
  background: #10b981;
  color: white;
}

Efect vizual în browser

Imaginea de profil este tăiată în formă de cerc perfect, iar butonul verde are capetele rotunjite ca o pastilă.

Greșeli frecvente

• Încercarea de a face o imagine rotundă cu border-radius: 50% fără a seta lățimea și înălțimea egale (dacă imaginea este dreptunghiulară, rezultă un oval/elipsă).
• Imaginile din interiorul unui card rotunjit care ies din colțuri (adaugă overflow: hidden pe părinte).

Comenzi înrudite

• border: Desenează o linie de contur în jurul conținutului și padding-ului unui element (grosime, stil, culoare).
• box-shadow: Aplică una sau mai multe umbre sub cutia unui element, adăugând adâncime și senzație de plutire (elevație).