Generator za Border Radius

Zaoblite svaki ugao pomoću klizača, oblikujte organske mrlje pomoću eliptičnog režima i odmah kopirajte CSS.

Predlošci
Uglovi
Svi uglovi
24px
CSS
Povucite klizače da zaoblite uglove.

Svaki ugao se iscrtava direktno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Kako funkcionišu četiri ugla i razlika između px i %?

Četiri klizača se mapiraju, u smjeru kazaljke na satu, na gornji lijevi, gornji desni, donji desni i donji lijevi ugao. U pikselima se ugao zaobljuje za fiksni iznos; u procentima se zaobljuje u odnosu na okvir — horizontalni procenat prati širinu, a vertikalni procenat prati visinu, tako da 50% pretvara kvadrat u krug.

Šta radi eliptični režim?

Kada je isključeno, svaki ugao je četvrtina kruga s jednim radijusom. Kada ga uključite, svaki ugao dobija zaseban horizontalni i vertikalni radijus, što vam omogućava da kreirate mekane, organske oblike poput mrlja. Generator automatski piše formu s kosom crtom za dvije vrijednosti i vraća se na kratku formu čim uglovi ponovo postanu okrugli.

Kako da napravim savršen krug ili oblik pilule?

Povežite uglove, prebacite na procente i postavite na 50%: kvadrat postaje krug. Za dugme u obliku pilule, zadržite piksele i povucite ugao preko polovine visine dugmeta — ivice ostaju potpuno zaobljene na bilo kojoj širini. Unaprijed podešena opcija "Krug" postavlja prvi slučaj jednim klikom.

Napisao i pregledao urednički tim BroBroGo.Zadnji put ažurirano:

Kako funkcioniše Generator za Border Radius

Generator za Border Radius je alat koji vam omogućava da prilagodite zaobljenost uglova jednog okvira. Pomoću ovog alata možete kontrolisati svaki ugao pojedinačno ili ih povezati zajedno, te birati između piksela ili procentualnih jedinica. Alat takođe nudi eliptični režim za kreiranje mekših, organskih oblika tako što svakom uglu dodjeljuje zasebne horizontalne i vertikalne radijuse. Generator trenutno kreira odgovarajući CSS kod za vaš dizajn.

Početna vrijednost klizača je postavljena na 24, što rezultira kodom border-radius: 24px;. Svaki ugao se iscrtava direktno u Vašem pregledniku, što znači da se ništa što ovdje postavite ne šalje na BroBroGo.

Kontrole i unos podataka u alatu

Alat nudi intuitivne kontrole za precizno oblikovanje uglova okvira:

  • Klizači: Služe za podešavanje zaobljenosti uglova sa rasponom vrijednosti od 0 do 100.
    • Kada je aktivna opcija Poveži sve uglove, jedan klizač pod nazivom Svi uglovi kontroliše sva četiri ugla istovremeno.
    • Kada uglovi nisu povezani, dostupna su četiri klizača sa oznakama Gore lijevo, Gore desno, Dolje desno i Dolje lijevo.
    • U eliptičnom režimu, svaki ugao dodatno dobija klizače Horizontalno i Vertikalno.
  • Jedinica: Selektor jedinica koji omogućava prebacivanje između "px" (pikseli) i "%" (procenti).
  • Poveži sve uglove: Prekidač za povezivanje ili razdvajanje kontrola za uglove.
  • Eliptični uglovi: Prekidač za uključivanje ili isključivanje eliptičnog režima rada.
  • Predlošci: Dugmad za brza podešavanja koja nose nazive Oštro, Zaobljeno, Krug, Mrlja i List.

Vizuelni prikaz i preuzimanje CSS koda

Rezultati vaših podešavanja se prikazuju u realnom vremenu kroz sljedeće elemente:

  • Pregled: Vizuelni prikaz okvira na kojem se odmah vide primijenjene promjene zaobljenosti uglova.
  • CSS: Generisani CSS kod koji se prikazuje ispod naslova CSS.
  • Kopiraj CSS: Dugme koje omogućava brzo kopiranje generisanog koda.

Pravila mapiranja i ponašanje jedinica

Četiri klizača za uglove se mapiraju u smjeru kazaljke na satu, počevši od gornjeg lijevog, preko gornjeg desnog i donjeg desnog, pa sve do donjeg lijevog ugla.

Ponašanje zaobljenja zavisi od izabrane jedinice:

  • U pikselima ("px"), ugao se zaobljuje za fiksni iznos.
  • U procentima ("%"), ugao se zaobljuje u odnosu na dimenzije samog okvira. Pri tome, horizontalni procenat prati širinu okvira, dok vertikalni procenat prati njegovu visinu. Postavljanje svih uglova na 50% u procentima pretvara kvadratni element u savršen krug.

Napredno oblikovanje i eliptični režim

Kada je isključen eliptični režim, svaki ugao predstavlja četvrtinu kruga sa jednim radijusom. Uključivanjem opcije Eliptični uglovi, svaki ugao dobija zaseban horizontalni i vertikalni radijus, što omogućava kreiranje mekanih i organskih oblika.

Kada je eliptični režim aktivan, generator piše CSS kod koristeći formu sa kosom crtom za dvije vrijednosti. Čim uglovi ponovo postanu okrugli, generator automatski vraća kod u kraću formu.

Za kreiranje specifičnih oblika možete koristiti sljedeća pravila:

  • Savršen krug: Povežite sve uglove, prebacite jedinicu na procente i postavite vrijednost na 50%. Predložak Krug automatski postavlja sve uglove na 50%.
  • Dugme u obliku pilule: Zadržite jedinicu u pikselima i povucite klizač preko polovine visine dugmeta. Bočne strane će ostati potpuno zaobljene bez obzira na širinu elementa.

Kome je ovaj alat namijenjen

Ovaj generator je koristan za:

  • Korisnike koji žele brzo zaobliti uglove okvira za potrebe web dizajna.
  • Korisnike koji trebaju kreirati savršen krug od kvadratnog elementa.
  • Dizajnere koji kreiraju dugmad u obliku pilule.
  • Korisnike koji žele kreirati mekane, organske oblike mrlja za svoj dizajn.
  • Sve koji trebaju generisati čist CSS kod za prilagođene radijuse uglova.

Često postavljana pitanja (FAQ)

Kako funkcionišu četiri ugla i razlika između px i %? Četiri klizača se mapiraju, u smjeru kazaljke na satu, na gornji lijevi, gornji desni, donji desni i donji lijevi ugao. U pikselima se ugao zaobljuje za fiksni iznos; u procentima se zaobljuje u odnosu na okvir — horizontalni procenat prati širinu, a vertikalni procenat prati visinu, tako da 50% pretvara kvadrat u krug.

Šta radi eliptični režim? Kada je isključeno, svaki ugao je četvrtina kruga s jednim radijusom. Kada ga uključite, svaki ugao dobija zaseban horizontalni i vertikalni radijus, što vam omogućava da kreirate mekane, organske oblike poput mrlja. Generator automatski piše formu s kosom crtom za dvije vrijednosti i vraća se na kratku formu čim uglovi ponovo postanu okrugli.

Kako da napravim savršen krug ili oblik pilule? Povežite uglove, prebacite na procente i postavite na 50%: kvadrat postaje krug. Za dugme u obliku pilule, zadržite piksele i povucite ugao preko polovine visine dugmeta — ivice ostaju potpuno zaobljene na bilo kojoj širini. Unaprijed podešena opcija "Krug" postavlja prvi slučaj jednim klikom.

CSS Cubic Bezier GeneratorPovucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.Generator za Box ShadowPovucite klizače da oblikujete box-shadow, slažite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataKreirajte linearni, radijalni ili konusni gradijent, dodajte tačke prekida boje i postavite smjer, a zatim kopirajte CSS jednim klikom.Flexbox GeneratorPostavite flex kontejner i njegove stavke pomoću vizuelnih kontrola, posmatrajte promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite kolone i redove, prevucite preko ćelija da postavite stavke i kopirajte CSS mreže sa odgovarajućim HTML-om jednim klikom.Kalkulator za CSS clamp()Unesite veličinu za male i velike ekrane i dobićete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Konverter bojaKonvertujte boje između HEX, RGB, HSL, HSV, CMYK i LAB formata — uredite bilo koje polje i ostala se ažuriraju u hodu.