Generator za border-radius

Zaoblite vsak kot z drsniki, oblikujte organske mehurčke z eliptičnim načinom in takoj kopirajte CSS.

Prednastavitve
Koti
Vsi koti
24px
CSS
Povlecite drsnike, da zaoblite kote.

Vsak kot se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.

Pogosta vprašanja

Kako delujejo štirje koti in razlika med px in %?

Štirje drsniki v smeri urinega kazalca ustrezajo kotom zgoraj levo, zgoraj desno, spodaj desno in spodaj levo. V slikovnih pikah se kot zaobli za fiksno vrednost; v odstotkih se zaobli glede na polje — vodoravni odstotek sledi širini, navpični pa višini, zato 50 % spremeni kvadrat v krog.

Kaj omogoča eliptični način?

Ko je možnost izklopljena, je vsak kot četrtina kroga z enim polmerom. Ko jo vklopite, dobi vsak kot ločen vodoravni in navpični polmer, s čimer lahko ustvarite mehke, organske oblike "mehurčkov". Generator namesto vas zapiše obliko z dvema vrednostma, ločenima s poševnico, in se vrne na kratko obliko, ko so koti spet okrogli.

Kako ustvarim popoln krog ali obliko tablete?

Povežite kote, preklopite na odstotke in nastavite 50 %: kvadrat postane krog. Za gumb v obliki tablete raje obdržite slikovne pike (px) in povlecite kot čez polovico višine gumba — stranice bodo ostale popolnoma zaobljene pri kateri koli širini. Prednastavitev Krog (Circle) nastavi prvi primer z enim klikom.

Generator za CSS Cubic BezierPovlecite ročici, da oblikujete krivuljo prehoda, opazujte gibanje pike v primerjavi z enakomernim in kopirajte vrednost cubic-bezier().Generator za box-shadowPovlecite drsnike, da oblikujete senco elementa, zložite plasti za večjo globino in takoj kopirajte končni CSS.Generator prelivovUstvarite linearen, radialen ali stožčast preliv, dodajte barvne točke, določite smer in kopirajte CSS z enim klikom.Generator za FlexboxNastavite flex vsebnik in njegove elemente z vizualnimi kontrolami, opazujte odziv postavitve v živo in kopirajte CSS z enim klikom.CSS Grid GeneratorDoločite stolpce in vrstice, povlecite čez celice za postavitev elementov ter z enim klikom kopirajte CSS mreže z ustreznim HTML-jem.Kalkulator za CSS clamp()Vnesite velikost za male in velike zaslone ter pridobite tekočo vrednost clamp(), ki se vmes gladko prilagaja — za velikosti pisav, paddinge, margine ali gape.Pretvornik barvPretvorite barve med formati HEX, RGB, HSL, HSV, CMYK in LAB — uredite katero koli polje in ostala se bodo sproti posodobila.