Punctele cheie
- 01Trei moduri — uniform, per-colț și eliptic — acoperă totul de la butoane cu colțuri rotunjite simple la forme blob organice.
- 02Suportă unitățile px, %, și rem, fiecare cu comportament de scalare diferit.
- 03Modul eliptic expune raze orizontale și verticale separate per colț pentru sintaxa completă border-radius CSS.
- 04Previzualizarea live folosește proprietatea CSS reală, deci ceea ce vezi este exact ceea ce browserul tău va reda.
De la Colțuri Rotunjite Simple la Forme Blob Organice
O valoare border-radius cu patru colțuri este destul de ușoară de tastat din memorie — border-radius: 8px. Dar odată ce ai nevoie de raze diferite per colț, sau vrei sintaxa CSS eliptică pentru forme organice, prescurtarea devine criptică rapid. Forma completă este top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — opt valori într-o ordine specifică.
Generatorul border-radius al Handytool-ului te lasă să tragi glisoare pentru fiecare colț în orice mod și să vezi forma se actualizez live. Treci între px, %, și rem fără a recalcula, și copiază declarația CSS corectă cu prescurtare sau formă lungă când ai terminat.
Cum să Proiectezi un Border Radius
- 01
Alege un mod
Modul uniform aplică o rază la toate patru colțuri. Modul per-colț controlează fiecare colț independent. Modul eliptic adaugă o rază orizontală și verticală separată per colț.
- 02
Alege o unitate
Alege px pentru dimensiuni absolute, % pentru valori care se scalează cu dimensiunile elementului, sau rem pentru dimensiuni legate de dimensiunea font-ului rădăcinii.
- 03
Trage glisoarele
Ajustează valorile razei și urmărește cum se actualizează elementul din previzualizare live. Pentru modul per-colț, trage cursorul fiecărui colț independent.
- 04
Previzualizează forma
Caseta de previzualizare aplică proprietatea CSS border-radius adevărată, deci forma pe care o vezi este forma pe care browserul tău o va reda.
- 05
Copiază CSS-ul
Dă clic pe Copiere pentru a prelua declarația border-radius și a o lipi în foaia de stil.
Forme Comune și Când Să Folosești Fiecare Mod
- 01Buton pil: mod uniform %, setat la 50% — întotdeauna o pil completă indiferent de lățimea butonului
- 02Card cu rotunjire subtilă: mod uniform px, 8–16px — cel mai comun model UI
- 03Etichetă sau etichetă asimetrică: mod per-colț, ascuțit pe o parte, rotunjit pe cealaltă
- 04Cerc avatar: mod uniform %, 50% — se scalează cu containerul imaginii
- 05Formă blob organică: mod eliptic cu valori X/Y diferite per colț
Previzualizare Instantanee, Nimic Încărcat
Generatorul border-radius este în întregime pe partea de client. Glisoarele, comutările modului și modificările unității actualizează previzualizarea imediat fără nicio călătorie server. Nu există cont și fără limită de rată.
Instrumentul funcționează în toate browserele moderne. Proprietatea border-radius — inclusiv sintaxa X/Y eliptică — este acceptată în fiecare versiune evergreen a Safari, Firefox, Edge și Chrome, deci rezultatul este sigur de utilizat fără prefix-uri de furnizor sau fallback-uri.
FAQ Generator Border-Radius
Care este diferența dintre px și % pentru border-radius?
Razele de pixel sunt absolute — 16px este întotdeauna 16px. Razele procent sunt relative la dimensiunile elementului, deci 50% creează un cerc perfect pe o cutie pătrată și o elipsă pe un dreptunghi.
Când ar trebui să folosesc modul eliptic?
Folosește modul eliptic când vrei un colț care se umflă mai mult pe o axă — pentru o pil orizontală, o formă de frunză sau un blob organic. CSS exprimă aceasta ca X-radii / Y-radii în prescurtarea border-radius.
De ce raza mea cu procent arată incorect pe o cutie non-pătrată?
Procentele orizontale sunt relative la lățimea elementului; procentele verticale la înălțimea acestuia. Pe un element lat și scurt, colțurile se întind în elipse în loc de arce circulare.
Funcționează rezultatul în fiecare browser?
Da — border-radius inclusiv sintaxa eliptică este acceptată în fiecare browser modern: toate versiunile evergreen ale Safari, Firefox, Edge și Chrome. Nu sunt necesare prefix-uri de furnizor.
Cum creez un cerc perfect cu border-radius?
Setează toți colțurile la 50% în modul procent pe un element pătrat. Elementul trebuie să aibă lățime și înălțime egale — folosește aspect-ratio: 1 / 1 dacă dimensiunea este dinamică.