Generator de colțuri rotunjite și forme
Ajustați razele orizontale și verticale ale celor patru colțuri în px sau % și previzualizați forma. Copiați sau salvați CSS-ul generat pentru border-radius. Lățimea, înălțimea și culoarea previzualizării nu sunt incluse în CSS.
Ce puteți face
Ajustați rotunjirea pornind de la o presetare
Alegeți dintre 8 presetări, inclusiv colțuri rotunjite, capsulă și frunză, apoi ajustați razele. Selectarea unei presetări înlocuiește razele și unitatea.
Dați fiecăruia dintre cele patru colțuri o rotunjire diferită
Dezactivați setarea razei identice pentru a introduce separat razele orizontale și verticale pentru colțurile stânga sus, dreapta sus, dreapta jos și stânga jos.
Verificați și obțineți CSS
Generați CSS după verificarea formei. Comutați între notația prescurtată și declarațiile pentru fiecare colț, apoi copiați sau salvați într-un fișier CSS.
Cum se utilizează
Alegeți o presetare și o unitate
Introduceți direct razele sau alegeți o presetare pentru a începe ajustarea. Schimbarea unității nu convertește numerele.
Comparați rotunjirea și forma
Introduceți o singură valoare pentru a folosi aceeași rază. Pentru a o varia după colț, debifați opțiunea și ajustați valorile orizontale și verticale.
Verificați dimensiunea, dacă este necesar
În setările previzualizării puteți modifica lățimea, înălțimea și culoarea previzualizării. Acestea nu sunt incluse în CSS-ul de ieșire.
Generați CSS, apoi copiați-l sau salvați-l
Apăsați „Generați CSS” și alegeți formatul dorit. Dacă modificați razele, unitatea sau dimensiunea, generați din nou.
Util atunci când
Dați colțurilor cardurilor și butoanelor o formă
Când doriți să creați CSS pentru componente de pagină rotunjind toate cele patru colțuri în mod egal sau rotunjind doar colțurile de sus.
Creați un fundal rotunjit asimetric
Când doriți să modificați rotunjirea orizontală și verticală după colț pentru a crea contururi care seamănă cu frunze sau forme organice.
Cum se relatează razele, unitățile și dimensiunea de afișare
Orizontal și vertical sunt cele două direcții ale aceluiași colț
Raza orizontală controlează rotunjirea orizontală, iar raza verticală controlează rotunjirea verticală. Un colț nu este rotunjit dacă oricare dintre valori este 0. Specificați cele patru colțuri în sens orar începând din stânga sus.
% folosește lățimea și înălțimea ca referințe separate
Valorile orizontale în % sunt relative la lățimea elementului, iar valorile verticale în % la înălțimea lui. Chiar și cu aceleași numere, un pătrat și un dreptunghi înalt sau lat arată diferit. px specifică direct o lungime.
Razele prea mari se micșorează cu aceeași proporție
Dacă suma razelor alăturate depășește latura, toate cele 8 raze afișate sunt reduse cu un factor comun. Valorile de intrare și CSS-ul generat rămân neschimbate. În detaliile de după generare, puteți verifica razele folosite pentru previzualizare.
Gama de contururi pe care o pot exprima colțurile rotunjite
border-radius transformă colțurile în curbe eliptice. Nu poate crea adâncituri sau poligoane arbitrare. Presetarea squircle aproximează forma cu colțuri eliptice; nu reproduce exact curba matematică.
Întrebări frecvente
Pot seta rotunjiri diferite pentru fiecare colț?
Da. Debifați „Folosiți același raz pentru toate colțurile” pentru a introduce separat razele orizontale și verticale ale fiecărui colț. Bifarea din nou setează toate razele la raza orizontală din stânga sus.
Numerele sunt convertite când schimb unitățile?
Nu. Numerele sunt păstrate și se schimbă doar unitatea. Dacă după trecerea de la px la % rămâne o valoare peste 100, introduceți-o din nou în intervalul 0–100.
Dimensiunea și culoarea din previzualizare sunt incluse în CSS?
Nu. Ieșirea conține doar declarațiile border-radius. Setați lățimea, înălțimea și culoarea de fundal în pagina sau componenta în care o folosiți.
De ce forma afișată are colțurile mai puțin rotunjite decât razele introduse?
Browserul reduce razele afișate cu aceeași proporție, pentru ca curbele colțurilor să nu se suprapună. Puteți verifica factorul de reducere și valorile în px pentru fiecare colț în „Razele folosite pentru afișare”.
Intrare și rezultate
- Raze
- Specificați toate cele 8 valori în aceeași unitate: 0–100% sau 0–9999px. Sunt acceptate și valori zecimale.
- Previzualizare
- Lățimea și înălțimea previzualizării sunt numere întregi de la 1–400px. Lățimea care nu încape poate fi derulată orizontal în câmp.
- Ieșire
- Notația prescurtată border-radius sau declarații pentru fiecare dintre cele 4 colțuri. Copiați sau salvați border-radius.css.
- Neinclus
- Lățimea, înălțimea, culoarea de fundal și exportul ca imagine sau SVG.