Salt la conținutul principal
LibraTool logoLibraTool

Generator Rază Chenar CSS — gratuit

Proiectează vizual colțuri rotunjite cu control independent pentru fiecare colț. Suportă sintaxa eliptică X/Y pentru forme organice.

Funcționează offline odată încărcat
border-radius: 20px 20px 20px 20px;
Unitate

Utilizări frecvente

  • Forme Blob organiceUtilizați sintaxa eliptică X/Y pentru a crea forme blob unice pentru secțiuni hero și ilustrații.
  • Colțuri de cărți și containereColțuri rotunjite standard pentru cărți, containere și panouri în designul UI modern.
  • Avatar și forme de imagine de profilCreați stilul de colț corect pentru imagini de profil: circular, squircle sau pătrat rotunjit.
  • Pilule, etichete și insigneConstruiți butoane pilule perfect rotunjite, etichete și insigne cu presetul 9999.
  • Designe de colț asimetriceAmestecați razele pe colțuri pentru a crea forme de cărți și butoane distincte, recunoscute din marcă.

Cum funcționează

Generatorul de border-radius rulează în întregime în browser — nu există server, nicio bibliotecă, și nicio încărcare. Construiește șirul valorii CSS border-radius direct în JavaScript folosind starea React și useMemo, apoi îl aplică ca stil inline pe un element div live, astfel încât motorul CSS propriu al browser-ului randază forma în timp real.

  1. 1
    Cursoarele scriu starea
    Fiecare intrare de tip range scrie într-una din opt variabile numerice de stare — patru raze de colț orizontale și patru verticale pentru modul eliptic. Modul unificat colapsează toate cele opt într-un singur cursor printr-un ajutor setAll care sincronizează fiecare valoare deodată.
  2. 2
    useMemo asamblează valoarea CSS
    Un hook useMemo recalculează șirul border-radius de fiecare dată când orice valoare de colț, unitate (px sau %), sau comutator eliptic se schimbă. În modul standard produce forma scurtă cu patru valori; cu elipticul activat, adaugă separatorul de bară oblică pentru sintaxa completă cu opt valori — de exemplu, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Motorul CSS al browser-ului randază previzualizarea
    Șirul calculat este setat ca stil inline borderRadius pe un element div simplu. Motorul de layout al browser-ului face toată randarea — nu există canvas, nu există SVG, și niciun cod de desenare terță parte.
  4. 4
    API-ul Clipboard copiază ieșirea
    Clic pe Copiază apelează navigator.clipboard.writeText cu fie declarația CSS (border-radius: ...;) fie clasa Tailwind cu valoare arbitrară echivalentă (rounded-[...]), în funcție de comutatorul de format selectat.

Instrumente similare

🎨

Generator Umbră CSS Box

Constructor vizual pentru box-shadow CSS cu previzualizare live, stivuire pe mai multe straturi, selector de culoare, comutator inset și copiere cu un clic. Include presetări Material, neumorfism și strălucire.

Încearcă
🟦

Generator CSS Grid

Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.

Încearcă
↔️

Generator CSS Flexbox

Experimentați cu direcție flex, înfășurare, justificare și aliniere pe elemente în direct — și copiați CSS-ul.

Încearcă

Întrebări frecvente