Generator Border Radius
Generatorul CSS border-radius setează în procente fiecare colț al border-radius-ului unui element, cu glisoare individuale sau un singur glisor All Corners, plus presetări precum cerc, frunză și blob, și copiază CSS-ul.
Despre acest instrument
Generatorul CSS border-radius setează în procente fiecare colț al border-radius-ului unui element, cu glisoare individuale sau un singur glisor All Corners, plus presetări precum cerc, frunză și blob, și copiază CSS-ul.
Cum se folosește
- Trage glisoarele pentru fiecare colț sau folosește All Corners.
- Încearcă o presetare precum Circle, Leaf sau Blob.
- Schimbă dimensiunea previzualizării dacă e nevoie.
- Apasă Copy CSS.
Bine de știut
- border-radius acceptă până la patru valori, în ordinea stânga-sus, dreapta-sus, dreapta-jos, stânga-jos.
- border-radius: 50% pe un element pătrat creează un cerc.
- Razele în procente se scalează cu dimensiunea elementului; razele în pixeli rămân fixe.
- Razele inegale pe colțurile opuse creează forme de frunză și blob fără niciun SVG.
- border-radius este acceptat în toate browserele actuale, fără prefixe.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum fac colțuri rotunjite în CSS?
Setează border-radius, de exemplu border-radius: 12px; pentru toate colțurile sau patru valori pentru colțuri individuale.
Cum fac un cerc cu CSS?
Dă elementului lățime și înălțime egale și border-radius: 50%.
În ce ordine sunt cele patru valori border-radius?
Stânga-sus, dreapta-sus, dreapta-jos, stânga-jos — în sensul acelor de ceasornic, pornind din colțul stânga-sus.
border-radius ar trebui să fie în px sau în %?
Folosește px pentru colțuri de mărime constantă la butoane și carduri; folosește % pentru forme precum cercuri și blob-uri care se scalează cu elementul.