Reglează raza celor patru colțuri

Cu Raza colțurilor, designerii și dezvoltatorii front-end pot să ajusteze o interfață înainte de implementare. Reglează separat raza de rotunjire pentru fiecare dintre cele patru colțuri.

Reglează separat raza de rotunjire pentru fiecare dintre cele patru colțuri. Folosește-l gratuit în browser, fără să creezi un cont.

Cum se folosește

Introduceți valoarea razei pentru colțul din stânga sus, apoi celelalte trei colțuri în ordinea specificată.
Folosiți o unitate precum px, em sau procent și păstrați aceeași unitate pentru toate cele patru colțuri.
Apăsați butonul de generare pentru a produce regula CSS border-radius corespunzătoare.
Citiți rezultatul, care combină cele patru valori, și copiați-l în foaia de stil.
Testați afișarea pe un element exemplu înainte de a-l adăuga în pagină.

Exemplu

Datele de intrare exemplu folosesc patru valori diferite pentru colțuri. După generare, rezultatul afișează proprietatea border-radius corespunzătoare. Puteți compara acest rezultat cu valorile dvs. pentru a confirma ordinea colțurilor înainte de a-l lipi în cod.

Limite și formate

Instrumentul nu desenează un dreptunghi pe ecran; produce doar regula CSS de copiat.
Valorile trebuie să fie numerice și zero sau pozitive; valorile negative nu sunt acceptate de proprietatea CSS.
Amestecarea unităților poate face browserul să ignore rezultatul.
Verificați întotdeauna afișarea finală în pagină, deoarece contextul elementului poate afecta efectul vizual.

Unde are loc procesarea

Totul rulează în browser. Valorile introduse nu sunt niciodată încărcate sau stocate. Calculul și formatarea regulii CSS au loc local, fără comunicare externă.

Întrebări frecvente

În ce ordine trebuie să introduc cele patru valori?

Ordinea așteptată este stânga sus, dreapta sus, dreapta jos, stânga jos. Aceasta este ordinea standard pentru proprietatea border-radius. Dacă inversați două valori, afișarea va fi diferită. Verificați rezultatul afișat pentru a confirma.

Pot folosi procente?

Da, procentele sunt acceptate. Ele creează colțuri rotunjite proporționale cu dimensiunea elementului. Păstrați aceeași unitate pentru toate cele patru colțuri pentru a evita un rezultat inconsistent.

Rezultatul este gata de lipit în fișierul meu CSS?

Da, rezultatul este o proprietate CSS completă. Îl puteți copia și lipi în foaia de stil. Asigurați-vă doar că nu este suprascris de altă regulă.