Generator border-radius CSS

Cum folosești generatorul de border-radius

1. Trage punctele de pe marginile previzualizării. Fiecare punct colorat stabilește raza orizontală a unui colț; dacă bifezi Colțuri eliptice (8 valori), punctele albe stabilesc razele verticale.
2. Sau scrie valori exacte la Colțuri: Stânga sus, Dreapta sus, Dreapta jos și Stânga jos, fiecare cu un câmp Orizontal și unul Vertical.
3. Alege Unitate: % (procent din dimensiunea casetei) sau px (pixeli). La schimbare, valorile curente se convertesc, deci forma rămâne aceeași.
4. Setează Lățimea casetei (px) și Înălțimea casetei (px) ca să corespundă elementului tău și folosește Toate colțurile ca să rotunjești toate colțurile deodată.
5. Încearcă Presetări (Rotunjit, Pastilă, Cerc, Frunză, Picătură, Ou, Bilet și trei blob-uri) sau apasă Blob aleatoriu pentru o formă organică.
6. Bifează Proprietăți separate dacă preferi cele patru declarații border-*-radius, apoi copiază Cod CSS cu butonul Copiază.

Tastatură: selectează un punct și apasă tastele săgeți ca să îi schimbi raza cu un pas (10 cu Shift).

Sintaxa border-radius

border-radius primește între una și patru valori, în ordinea stânga sus, dreapta sus, dreapta jos, stânga jos. Ca la margini, valorile lipsă se copiază de la colțul opus: border-radius: 10px 20px rotunjește colțurile stânga sus și dreapta jos cu 10px, iar celelalte două cu 20px. Instrumentul scrie întotdeauna cea mai scurtă formă echivalentă.

De fapt, fiecare colț este un sfert de elipsă, cu două raze. O bară oblică separă razele orizontale de cele verticale, ceea ce permite până la opt valori:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Înainte de bară: razele orizontale ale celor patru colțuri. După ea: razele verticale. Când cele două liste sunt egale, partea de după bară se omite.

Pixeli sau procente?

• px dă aceeași curbură indiferent de dimensiunea elementului. Este alegerea potrivită pentru butoane, carduri și câmpuri de formular: border-radius: 8px.
• % este relativ la element: razele orizontale la lățime, cele verticale la înălțime. 50% transformă un pătrat într-un cerc și un dreptunghi într-o elipsă. Procentele sunt cele care fac blob-urile să se scaleze odată cu elementul.

Pentru un buton în formă de pastilă, folosește o rază în pixeli de cel puțin jumătate din înălțime. Presetarea Pastilă face exact asta pentru dimensiunea casetei introduse de tine; merge și o valoare uriașă, precum 999px.

Când razele alăturate însumează mai mult decât latura pe care o împart, browserele micșorează proporțional toate razele până când încap. De aceea, dacă tragi două puncte unul peste celălalt, forma nu se strică.

Forme blob

Presetările blob și Blob aleatoriu folosesc opt procente, în care cele două puncte de pe fiecare latură însumează 100 %. Curbele se întâlnesc atunci exact, iar forma arată ca un bolovan neted. Poți anima trecerea între două blob-uri cu o transition CSS pe border-radius, pentru un efect de „morphing”.