Generator CSS Border Radius — Besplatni Online Alat

Šta je Generator CSS Border Radius?

Besplatni online generator CSS border radius. Prilagodite radijus uglova pomoću vizuelnih kontrola.

CSS svojstvo border-radius kontrolira zaobljenost uglova elemenata, a njegova svestranost ide daleko dalje od običnih zaobljenih pravougaonika. Podešavanjem svakog ugla zasebno možete kreirati pilule, krugove, asimetrične oblike i složene organske forme — sve s jednim CSS svojstvom. CSS Border Radius Generator omogućava pojedinačnu kontrolu klizačem za sva četiri ugla s pregledom uživo koji se ažurira trenutno.

Svaki ugao — gornji lijevi, gornji desni, donji desni, donji lijevi — ima svoj klizač, što vam omogućava da kreirate potpuno asimetrične oblike. Prebacivanje jedinica između piksela (px) i postotaka (%) značajno mijenja ponašanje. Pikselne vrijednosti kreiraju uglove s fiksnim radijusom koji ostaju iste veličine bez obzira na dimenzije elementa. Postotne vrijednosti povezuju radijus s veličinom elementa, što je način na koji kreiramo savršene krugove (border-radius: 50% na kvadratu).

Četiri unaprijed podešena izgleda pokrivaju najčešće slučajeve upotrebe. Circle kreira border-radius: 50% za savršen krug (ili elipsu na nekvadratnim elementima). Pill kreira oblik s potpuno zaobljenim krajevima (border-radius: 9999px), koristan za oznake dugmadi i tagove. Card primjenjuje suptilno zaokruživanje od 8px prikladno za komponente kartica i kontejnere. Rounded primjenjuje zaokruživanje od 8px na sve uglove, prikladno za dugmad i ulazna polja formulara.

Generirani CSS kod prikazuje skraćenu sintaksu. Ako sva četiri ugla imaju istu vrijednost, ispisuje se jedna vrijednost (npr. border-radius: 8px). Ako se uglovi razlikuju, ispisuje se sintaksa s četiri vrijednosti u smjeru kazaljke na satu (gornji lijevi, gornji desni, donji desni, donji lijevi). Kod je spreman za kopiranje u vaš stylesheet.

Primjeri upotrebe za Generator CSS Border Radius

Kreiranje zaobljenog dugmeta u obliku pilule

Vaš dizajn sistem koristi dugmad u obliku pilule s visinom od 24px i potpuno zaobljenim krajevima. Odaberite izgled "Pill" za border-radius: 9999px. Pregled dugmeta prikazuje oblik pilule. Kopirajte CSS i primijenite ga na svoju komponentu dugmeta. Podesite vrijednosti uglova pojedinačno ako želite mekši izgled.

Dizajniranje asimetričnog oblika za hero sekciju

Hero sekcija landing stranice treba prepoznatljiv oblik: gornji lijevi 0px, gornji desni 40px, donji desni 0px, donji lijevi 40px. Postavite svaki klizač ugla zasebno. Pregled prikazuje jedinstveni asimetrični oblik. Generirani CSS je border-radius: 0 40px 0 40px.

Pravljenje kružnog avatara s postotnim radijusom

Korisnički avatar je kvadratna slika 64x64 piksela. Prebacite jedinicu na % i postavite sva četiri ugla na 50%. Pregled prikazuje savršen krug. Generirani CSS je border-radius: 50%, što radi na svakom kvadratnom elementu bez obzira na veličinu.

Zašto koristiti Generator CSS Border Radius?

Individual control for all 4 corners
px and % unit toggle
Uživo preview box
4 presets: Circle, Pill, Card, Rounded

Kako koristiti Generator CSS Border Radius — Korak po korak

Prilagodite sliders for each corner (top-left, top-right, bottom-right, bottom-left).

Uključite between px and % units.

Preview the border radius live.

Kopirajte the CSS code.

Kome je Generator CSS Border Radius najbolje namijenjen?

dizajn korisničkog sučelja
button styling
dizajn
web

Profesionalni savjeti za Generator CSS Border Radius

1Koristite pikselne vrijednosti za elemente fiksne veličine (dugmad, kartice) gdje radijus uglova treba ostati konstantan. Koristite postotne vrijednosti za responzivne elemente gdje se radijus treba skalirati s elementom.
2Izgled "Pill" koristi vrlo veliku pikselnu vrijednost (9999px) umjesto 50% jer 50% na pravougaoniku kreira elipsu, a ne pilulu. Velika pikselna vrijednost osigurava potpuno zaobljene krajeve na svakom pravougaonom elementu.
3Za "squircle" (kvadrat s blago zaobljenim uglovima popularan u iOS-u), koristite otprilike 10-12% border-radiusa na svim uglovima. To kreira mekši izgled od malih pikselnih vrijednosti.
4Kada koristite postotne vrijednosti, radijus se izračunava relativno u odnosu na širinu elementa (za lijevo/desno) i visinu (za gornje/donje). Različiti postoci na horizontalnim u odnosu na vertikalne uglove kreiraju eliptične uglove.

Generator CSS Border Radius — često postavljana pitanja

Šta je border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

Как to make a circle with css??

Postavite border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Generator CSS Border Radius really free to use?

Yes, Generator CSS Border Radius is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Spremni za korištenje Generator CSS Border Radius?

Besplatni online alat — radi u vašem pretraživaču, bez registracije. Počnite koristiti odmah.

Isprobaj