Generator CSS Border-Radius & Forme

Secretul Sintaxei cu 8 Valori a border-radius

Mulți dezvoltatori știu că proprietatea border-radius acceptă până la 4 valori (pentru fiecare colț în sensul acelor de ceasornic: sus-stânga, sus-dreapta, jos-dreapta, jos-stânga). Însă specificația W3C permite definirea a două raze separate pentru fiecare colț (raza orizontală și raza verticală), separate printr-o bară oblică (/):

/* Sintaxa completă eliptică pe 8 valori */
border-radius: [orizontal TL] [TR] [BR] [BL] / [vertical TL] [TR] [BR] [BL];

/* Exemplu pentru o formă organică asimetrică (blob): */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Această proprietate transformă colțurile din simple arcuri de cerc în elipse proporționale, permițând crearea de ilustrații abstracte, fundaluri de avatare și efecte grafice fără nicio imagine grafică vectorizată (.svg) suplimentară.

Geometria Colțurilor: Pixeli (px) vs. Procente (%)

Comportamentul rotunjirii este dictat fundamental de unitatea de măsură aleasă în raport cu lățimea și înălțimea casetei:

• Pixeli (valori absolute): Raza cercului de rotunjire este fixă, indiferent cât de mult crește sau scade dimensiunea elementului. Este ideală pentru carduri, ferestre modale și panouri de conținut unde dorim o consistență vizuală strictă a colțurilor (ex.: 8px, 12px, 16px).
• Procente (valori relative): Raza este calculată ca un procentaj direct din lățimea (pentru raza orizontală) și înălțimea (pentru raza verticală) elementului. Pe un pătrat perfect (ex.: 100x100px), border-radius: 50% produce un cerc perfect. Pe un dreptunghi (ex.: 200x80px), 50% produce o elipsă turtită!

Trucul Butonului Tip Pastilă (Pill Button): 9999px vs. 50%

O confuzie frecventă apare la crearea butoanelor rotunjite complet la capete. Dacă setezi border-radius: 50%; pe un buton dreptunghiular alungit, browserul va desena o elipsă ovală, deformând marginile drepte!

/* GREȘIT pentru butoane dreptunghiulare (produce o elipsă turtită): */
.btn-pill-bad {
  border-radius: 50%;
}

/* CORECT: Folosește o valoare arbitrar mare în pixeli */
.btn-pill-perfect {
  padding: 10px 24px;
  border-radius: 9999px; /* Browserul limitează automat curbura la jumătatea înălțimii */
}

Decuparea Conținutului Copil: Relația cu overflow: hidden

Când un element părinte are colțuri rotunjite și găzduiește o imagine copil <img> sau un element video, conținutul media dreptunghiular va „curge” inestetic peste colțurile rotunjite ale părintelui, ascunzându-le:

/* Asigură decuparea perfectă a imaginilor din card */
.card-cu-imagine {
  border-radius: 16px;
  overflow: hidden; /* Forțează copiii să fie decupați conform razei de rotunjire */
}

Efect de Animație Blob Fluid (Morphing Organic)

Combinând sintaxa pe 8 valori cu o animație @keyframes infinită, poți obține un avatar lichid în continuă mișcare organică fără pic de JavaScript:

@keyframes morphBlob {
  0%, 100% {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

.avatar-organic {
  width: 180px;
  height: 180px;
  animation: morphBlob 8s ease-in-out infinite alternate;
}

Întrebări Frecvente (FAQ) despre Border-Radius