CodeKitHubŠto je ovaj alat?
border-radius je CSS svojstvo koje zaobljuje kutove elementa. Ručno napisano zahtijeva četiri vrijednosti u fiksnom redoslijedu — gore-lijevo, gore-desno, dolje-desno, dolje-lijevo — što je lako pomiješati, pogotovo kad se svaka od četiri kuta razlikuje.
Ovaj alat uklanja pogađanje: pomaknite klizač, gledajte kako se kut zaobljuje u prikazu uživo, i pročitajte točan CSS iz generiranog polja koda. Jedan prekidač zaključavanja prebacuje između jednoličnog polumjera (sva četiri kuta jednaka, najčešći slučaj) i četiri neovisna klizača za organske, asimetrične oblike.
Zašto ga koristiti?
- Prikaz uživo ažurira se trenutno dok povlačite — bez uređivanja CSS-a i osvježavanja radi vidjeti rezultat.
- Zaključavanje jednim klikom za uobičajeni slučaj 'isti polumjer na svakom kutu'; otključajte za gumbe u obliku kapsule, oblačiće za govor i mrlje.
- Izlaz koristi skraćeni oblik s jednom vrijednošću kada se svi kutovi podudaraju, ili puni oblik s četiri vrijednosti kada se ne podudaraju — spreman za kopiranje i lijepljenje u oba slučaja.
- Radi u cijelosti u vašem pregledniku. Ništa što unesete ne šalje se nikamo.
- Besplatno, bez registracije, radi na mobitelu.
Kako ga koristiti
- Ostavite 'zaključaj sve kutove' označeno i povucite bilo koji klizač kako biste postavili jedan jednoličan polumjer za cijelu kutiju.
- Odznačite zaključavanje kako biste svaki kut kontrolirali neovisno — korisno za oblike kapsule, kapljice i asimetrične kartice.
- Gledajte kako se prikazna kutija ažurira uživo dok podešavate svaki klizač.
- Kopirajte generirani CSS iz polja koda i zalijepite ga u svoju stylesheet datoteku.
Primjer
Ulaz
Gore-lijevo: 40px, Gore-desno: 8px, Dolje-desno: 40px, Dolje-lijevo: 8pxIzlaz
border-radius: 40px 8px 40px 8px;Nepodudarni suprotni kutovi poput ovoga stvaraju siluetu lista ili latice — čest efekt u dizajnu kartica i značaka.
px ili % — koju jedinicu koristiti?
Ovaj generator daje vrijednosti u pikselima, što je pravi zadani izbor za većinu rada na sučelju: gumbi, kartice i polja za unos gdje želite fiksan, predvidljiv polumjer kuta neovisno o veličini elementa.
Postotci se ponašaju drugačije — relativni su prema širini i visini samog elementa, pa polumjer od 50% na kvadratnom elementu daje savršen krug, a na nekvadratnom elementu daje elipsu. Ako želite taj efekt (avatari, oblici mrlja koji se skaliraju s spremnikom), uzmite generirani CSS i ručno zamijenite px vrijednosti % vrijednošću — na primjer border-radius: 50% pretvara bilo koju kvadratnu kutiju u krug.
Uobičajeni obrasci border-radiusa
- Zaobljena kartica: svi kutovi jednaki, otprilike 8–16px za komponente sučelja.
- Gumb u obliku kapsule: postavite polumjer na pola visine elementa (ili jednostavno koristite 9999px, koji se automatski prilagođava punom obliku kapsule bez obzira na visinu).
- Kružni avatar: border-radius: 50% na kvadratnom (jednaka širina i visina) elementu.
- Oblačić za govor: tri kuta zaobljena, jedan oštar — postavite tri klizača visoko, a jedan na 0.
- Oblik lista/latice: suprotni kutovi podudarni, susjedni kutovi različiti — npr. gore-lijevo i dolje-desno oba velika, gore-desno i dolje-lijevo oba mala.
Kombiniranje sa sjenom
Zaobljeni kutovi rijetko se pojavljuju sami — kartice i gumbi obično trebaju i malo sjene za dubinu. Koristite Generator box-shadow za podešavanje sjene i primijenite obje generirane CSS naredbe na isti element.
Često postavljana pitanja
Koja je razlika između border-radiusa i redoslijeda kutova?
CSS skraćeni oblik uvijek slijedi gore-lijevo, gore-desno, dolje-desno, dolje-lijevo tim redoslijedom, u smjeru kazaljke sata počevši od gore-lijevo. Četiri klizača ovog alata označena su u skladu s tim, pa nikada ne morate sami pamtiti redoslijed.
Mogu li koristiti različite jedinice za svaki kut?
Da, u stvarnom CSS-u možete miješati px, %, em i rem po kutovima, iako je to rijetko u praksi. Ovaj alat generira jednolične px vrijednosti radi jednostavnosti — zamijenite pojedinačnu vrijednost s % ili drugom jedinicom izravno u stylesheet datoteci ako trebate miješane jedinice.
Zašto border-radius: 50% ponekad daje ovalan oblik umjesto kruga?
Zato što su postotci relativni prema svakoj osi neovisno — vodoravni polumjer je postotak širine elementa, okomiti polumjer postotak njegove visine. Na kvadratnom elementu (jednaka širina i visina) to daje savršen krug; na pravokutniku daje elipsu.
Radi li border-radius i na pozadinskim slikama i obrubima?
Da — border-radius izrezuje pozadinu, obrub i (u modernim preglednicima) box-shadow elementa prema zaobljenom obliku. Ne izrezuje podređeni sadržaj koji izlazi izvan granica osim ako i na roditelju postavite overflow: hidden.
Postoji li ograničenje koliko polumjer može biti velik?
Nema strogog ograničenja — ako polumjer premaši polovicu širine ili visine elementa, preglednici ga ograničavaju tako da se dvije krivulje na toj strani spoje točno u sredini, čime kvadrat postaje savršen krug ili oblik kapsule.
Kako napraviti oblik kapsule ili savršen krug?
Za oblik kapsule postavite polumjer na barem polovicu visine elementa — uobičajen trik je border-radius: 9999px, koji radi na bilo kojoj visini jer preglednik automatski ograničava krivulju. Savršen krug zahtijeva dvije stvari: jednaku širinu i visinu, plus border-radius: 50%.