Border Radius-generator

Rund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.

Forhåndsinnstillinger
Hjørner
Alle hjørner
24px
CSS
Dra i glidebryterne for å runde av hjørnene.

Hvert hjørne tegnes direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hvordan fungerer de fire hjørnene og px vs. %?

De fire glidebryterne tilsvarer, med klokken, hjørnene oppe til venstre, oppe til høyre, nede til høyre og nede til venstre. I piksler rundes et hjørne av med en fast verdi; i prosent rundes det av i forhold til boksen — en horisontal prosent følger bredden og en vertikal prosent følger høyden, slik at 50% gjør et kvadrat til en sirkel.

Hva gjør elliptisk modus?

Når den er av, er hvert hjørne en kvart sirkel med én enkelt radius. Slår du den på, får hvert hjørne en separat horisontal og vertikal radius, som er slik du bygger myke, organiske «klatt»-former (blobs). Generatoren skriver skråstrek-syntaksen med to verdier for deg, og går tilbake til den korte formen så snart hjørnene er runde igjen.

Hvordan lager jeg en perfekt sirkel eller en pilleform?

Koble sammen hjørnene, bytt til prosent og sett verdien til 50%: da blir et kvadrat til en sirkel. For en pilleformet knapp beholder du piksler i stedet, og drar et hjørne forbi halvparten av knappens høyde — da forblir sidene helt avrundede uansett bredde. Forhåndsinnstillingen «Sirkel» setter opp det første tilfellet med ett klikk.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.