Generator Border Radius CSS — Colțuri Rotunjite Setate Vizual

Border-radius determină rotunjirea colțurilor elementelor CSS. Generatorul nostru îți permite să setezi fiecare colț separat și oferă codul CSS direct.

Sintaxa border-radius

border-radius: 10px ajustează toate cele patru colțuri. border-radius: 10px 20px 10px 20px este stânga-sus, dreapta-sus, dreapta-jos, stânga-jos. border-radius: 50% creează un cerc (la element pătrat). border-radius: 50px 100px creează o formă de pilulă.

Colțuri eliptice

border-radius: 100px / 50px creează colțuri eliptice — raza orizontală 100px, raza verticală 50px. Aceasta oferă dreptunghiuri rotunjite cu mai multă libertate de design decât border-radius standard. Popular pentru componentele card și secțiunile hero.

Ghiduri de design pentru border-radius

Consistența este cheia — folosește același border-radius pentru elemente similare. Material Design al Google folosește border-radius ca mijloc proeminent de design. Butoane: 4–8px pentru aplicații serioase, 20–50px pentru interfețe jucăușe. Carduri: 8–16px pentru majoritatea cazurilor de utilizare.