Avrund bildehjørner online gratis

Dra og slipp bilder her, eller klikk for å velge

Støttede formater: JPG, PNG, WebP

Avrund bildehjørner online – moderne design på sekunder

Trenger du å lage runde profilbilder, avrunde hjørnene på produktbilder eller gi bildene dine et moderne utseende? Vårt gratis online verktøy lar deg enkelt og raskt justere hjørnene på ethvert bilde direkte i nettleseren. Ingen registrering, ingen programvareinstallasjon.

All behandling skjer lokalt på enheten din – bildene sendes ingen steder, de forblir trygge hos deg. Ideelt for grafikere, webdesignere, sosiale medier-ansvarlige og vanlige brukere.

Hvordan avrunde bildehjørner – en rask guide

1. Last opp bilder

Dra og slipp bilder inn i applikasjonen, eller velg dem med knappen. Vi støtter JPG, PNG og WebP formater. Du kan laste opp flere bilder samtidig for batchbehandling.

2. Velg en forhåndsinnstilling eller tilpassede innstillinger

Start med en av de ferdige forhåndsinnstillingene (Diskret, Medium, Sterk, Sirkel) eller juster hvert hjørne individuelt for en unik effekt.

3. Tilpass detaljene

Juster avrundingsradius, velg bakgrunn (gjennomsiktig, hvit, svart, tilpasset farge) og velg kurvetypen for et perfekt resultat.

4. Last ned resultatet

Hvert bilde kan lastes ned individuelt eller alle samtidig som et ZIP-arkiv – perfekt når du jobber med titalls filer.

Forhåndsinnstillinger for avrunding – rask start

For de vanligste bruksområdene har vi forberedt 4 forhåndsinnstilte profiler. Ett klikk er alt som trengs, og du kan laste ned med en gang.

Diskret avrunding (5%)

Når du skal bruke det: Moderne webdesign, der du ønsker å beholde et skarpt, men ikke for geometrisk utseende.

Ideelt for:

  • Produktbilder for nettbutikker
  • Bilder til blogger og artikler
  • Bannere og annonser
  • UI-design (applikasjoner, nettsider)

Effekt: En nesten umerkelig avrunding som gir bildet et mykere, mer behagelig inntrykk uten store endringer.

Medium avrunding (10%)

Når du skal bruke det: Et universelt valg for de fleste prosjekter. Avrundingen er tydelig, men overskygger ikke bildeinnholdet.

Ideelt for:

  • Bilder på landingssider
  • Videominiatyrbilder
  • Teammedlemmer-seksjoner
  • Gallerier på nettsteder

Effekt: Klassisk avrunding, som er standard i moderne webdesign. Virker profesjonell og innbydende.

Sterk avrunding (20%)

Når du skal bruke det: Når du ønsker et fremtredende designelement eller det passer til et mer lekent varemerke.

Ideelt for:

  • Kreative porteføljer
  • Barnevennlige nettsteder og apper
  • Livsstilsblogger
  • Instagram-grid-design

Effekt: En markant avrunding som er et sentralt designelement. Bildene får et spesifikt, minneverdig utseende.

Sirkel (50%)

Når du skal bruke det: Du trenger perfekt runde profilbilder eller sirkulære designelementer.

Ideelt for:

  • Avatarer og profilbilder
  • Kundeuttalelser (referanser)
  • Teambilder
  • Logo-plassholdere
  • Profilbilder for sosiale medier

Effekt: Et kvadrat blir en sirkel, et rektangel blir en ellipse. Perfekt for å skape en enhetlig stil for hele teamets profilbilder.

Avanserte innstillinger – full kontroll

Individuelle innstillinger for hvert hjørne

Trenger du ikke symmetrisk avrunding? Juster hvert hjørne individuelt for unike, asymmetriske effekter.

Eksempler på bruk av asymmetri:

  • Øvre venstre og nedre høyre hjørne avrundet, de andre skarpe → dynamisk, moderne utseende
  • Kun de nedre hjørnene avrundet → design inspirert av Material Design
  • Ett hjørne betydelig mer avrundet → utradisjonelt, oppmerksomhetsfangende design

Slik gjør du det:

  1. Klikk på låsikonet (🔓) for å koble fra hjørnene
  2. Hver glidebryter kontrollerer et spesifikt hjørne
  3. Du ser endringene i sanntid
  4. Klikk på 🔗 for å koble sammen alle hjørnene igjen

Måleenheter – prosent vs. piksler

Prosent (%) – anbefalt Radiusen beregnes relativt til bildets størrelse. 10 % betyr at avrundingen vil se proporsjonalt lik ut på både et lite og et stort bilde.

Når du skal bruke det: Når du behandler bilder i forskjellige størrelser og ønsker en enhetlig visuell effekt.

Piksler (px) – presis kontroll Radiusen har en absolutt størrelse uavhengig av bildets dimensjoner. 50px vil alltid være 50px.

Når du skal bruke det: Når du trenger en nøyaktig definert radius (f.eks. et designsystem krever 16px border-radius).

Valg av bakgrunn – hva skjer med hjørnene?

Når du avrunder hjørner, må du spesifisere hva som skal vises der de skarpe kantene var.

Gjennomsiktig bakgrunn (PNG) Hjørnene blir gjennomsiktige – ideelt for bruk på nettsider med farget bakgrunn eller for videre redigering i grafikkprogrammer.

⚠️ Merk: Krever PNG eller WebP utdataformat. JPG støtter ikke gjennomsiktighet!

Hvit bakgrunn Hjørnene blir hvite – et standardvalg for bilder som skal være på en hvit bakgrunn (nettbutikker, trykksaker).

Svart bakgrunn Hjørnene blir svarte – bruk dette for dark mode design eller mørke bakgrunner.

Tilpasset farge Velg en nøyaktig farge med fargevelgeren – perfekt match med nettstedets eller merkevarens fargepalett.

Tips: Kopier hex-koden for nettstedets bakgrunnsfarge (f.eks. #F5F5F5) for en perfekt match.

Kurvetype – standard vs. glatt

Standardkurve (arcTo) Klassisk matematisk avrunding brukt i CSS border-radius. Skaper en uniform bue – akkurat det øynene er vant til fra de fleste nettsteder.

Når du skal bruke det: For et standard, forutsigbart utseende som er kompatibelt med CSS-design.

Glatt kurve (quadraticCurve) En mykere, mer organisk kurve skapt med Bézier-kurver. Virker mykere og mer naturlig.

Når du skal bruke det: For kunstneriske fotografier, organiske design, når du vil ha noe spesielt.

Forskjellen: Standardkurven har en konstant krumning. Den glatte kurven er mild i starten og runder gradvis av – virker mer “elegant”.

Batchbehandling – spar timer med arbeid

Trenger du å avrunde hjørnene på 50 produktbilder for en nettbutikk? Eller lage enhetlige profilbilder for hele teamet? Batchbehandling håndterer det automatisk.

Slik fungerer det:

  1. Last opp alle bildene samtidig (ingen begrensning på antall)
  2. Juster avrundingen – den vil gjelde for alle bildene
  3. Følg fremgangen – hvert bilde har status “Behandler…” → “Ferdig”
  4. Last ned ZIP – alle de redigerte bildene i én fil

Reelt eksempel: Du har 30 teambilder i forskjellige dimensjoner og trenger å gjøre dem om til enhetlige runde avatarer med gjennomsiktig bakgrunn. Hele prosessen tar mindre enn et minutt:

  • Last opp alle (dra og slipp)
  • Forhåndsinnstilling “Sirkel”
  • Bakgrunn “Gjennomsiktig”
  • Format “PNG”
  • Last ned ZIP
  • Ferdig! ✓

Brukstilfeller – inspirasjon fra praksis

Webdesign og utvikling

Teamprofilbilder Lag konsistente teambilder med enhetlig avrunding. Anbefaling: Sirkel eller 10 % avrunding, gjennomsiktig PNG-bakgrunn.

Produktbilder for nettbutikk Moderne avrundede hjørner gir produktene et mer innbydende utseende. Anbefaling: 5-10 % avrunding, hvit JPG-bakgrunn.

Blogg-miniatyrbilder Bilder til artikler med diskret avrunding for bedre visuell hierarki. Anbefaling: 8-12 % avrunding, avhengig av nettstedets design.

Hero-seksjoner og bannere Markant avrunding for oppmerksomhetsfangende elementer. Anbefaling: 15-25 % avrunding.

Sosiale medier

Instagram-feed-grid Enhetlig stil med konsekvent avrunding. Anbefaling: 10-15 % eller sirkel for highlight covers.

Facebook/LinkedIn profilbilder Forberedelse av runde avatarer med perfekt sentrert innhold. Anbefaling: Forhåndsinnstilling “Sirkel”, gjennomsiktig bakgrunn.

YouTube-miniatyrbilder Avrundede elementer inni miniatyrbilder for et mer moderne utseende. Anbefaling: 8-12 % avrunding.

Markedsføring og reklame

Bannere og displayannonser Avrunding av hjørner for et mer sofistikert annonseutseende. Anbefaling: 5-10 % i henhold til merkevarens retningslinjer.

Presentasjoner og pitch-dekker Profesjonelt utseende på alle bilder med enhetlig avrunding. Anbefaling: 10 % avrunding.

Trykksaker Forberedelse av bilder med avrundede hjørner for brosjyrer, kataloger. Anbefaling: 5-8 % avrunding.

Kreative prosjekter

Digitale kollasjer Kombinasjon av bilder med forskjellige grader av avrunding for en kunstnerisk effekt. Anbefaling: Eksperimenter med asymmetri.

Mockups og portefølje Moderne presentasjon av arbeider med diskret avrunding. Anbefaling: 8-15 % avhengig av stil.

Tips og triks fra profesjonelle

Den gylne regel: mindre er mer

For de fleste prosjekter er 8-12 % avrunding nok. For markant avrunding kan virke uprofesjonelt.

Konsistens er nøkkelen

Bruk samme avrunding på alle bilder i et prosjekt. Inkonsistens virker kaotisk.

PNG for gjennomsiktighet

Vil du ha gjennomsiktige hjørner? Eksporter alltid som PNG eller WebP, aldri JPG.

Asymmetri med måte

Asymmetrisk avrunding er effektivt, men overdriv ikke – bruk det som aksenter, ikke på hvert bilde.

Mobile-first tilnærming

På mobiler ser avrundede hjørner enda bedre ut enn på desktop. Test utseendet på mindre skjermer.

Bakgrunn i henhold til konteksten

  • Nettside med hvit bakgrunn → hvit bakgrunn på bildene
  • Nettside med mørk modus → svart eller gjennomsiktig
  • Farget bakgrunn → gjennomsiktig PNG eller en nøyaktig matchende farge

Piksler for designsystemer

Hvis du jobber i henhold til et designsystem (f.eks. Material Design med 8px grid), bruk pikselenheter for nøyaktig konsistens.

Runde bilder – sentrering er viktig

Før du lager en sirkel, sørg for at hovedinnholdet i bildet (f.eks. ansiktet) er sentrert. Ellers vil det havne utenfor beskjæringen.

Tekniske detaljer

Støttede formater

Inndata: JPG, JPEG, PNG, WebP Utdata: JPG, PNG, WebP, eller originalformat

Maksimal oppløsning

Verktøyet behandler bilder uten størrelsesbegrensning. Testet med bilder opptil 8K (7680×4320px).

Utdatakvalitet

  • PNG: Tapløs komprimering, 100 % kvalitet
  • WebP: Justerbar kvalitet 1-100 % (anbefalt 90 %)
  • JPG: Justerbar kvalitet 1-100 % (anbefalt 90 %)

Gjengivelsesteknologi

Vi bruker HTML5 Canvas API med anti-aliasing for jevne kanter uten “trappetrinn”.

Ofte stilte spørsmål (FAQ)

Hvorfor blir det runde bildet mitt deformert til en ellipse? Forhåndsinnstillingen "Sirkel" fungerer perfekt på kvadratiske bilder (1:1 sideforhold). Hvis du laster opp et rektangulært bilde (f.eks. 16:9 eller 4:3), vil resultatet bli en ellipse (oval), ikke en perfekt sirkel. Løsning: Før behandling, beskjær bildet til et kvadrat ved hjelp av vårt "Beskjær bilde"-verktøy eller i en hvilken som helst editor. Bruk deretter "Sirkel"-forhåndsinnstillingen for å få et perfekt rundt bilde.
Kan jeg avrunde hjørnene på en animert GIF? Foreløpig nei – GIF-animasjoner støttes dessverre ikke. Verktøyet behandler kun statiske bilder (JPG, PNG, WebP). Hvis du laster opp en animert GIF, vil kun den første rammen behandles. For å bevare animasjonen trenger du et spesialisert verktøy for GIF-filer.
Hvordan lager jeg et perfekt rundt profilbilde? Følg disse trinnene:
1. Beskjær bildet til et kvadrat (1:1 forhold) – du kan bruke vårt "Beskjær bilde"-verktøy
2. Last opp det kvadratiske bildet til verktøyet for avrunding av hjørner
3. Klikk på forhåndsinnstillingen "Sirkel" (setter 50 % avrunding)
4. Velg bakgrunn "Gjennomsiktig" (viktig for transparente hjørner)
5. Velg format "PNG" (JPG støtter ikke gjennomsiktighet)
6. Last ned resultatet – du har et perfekt rundt bilde med gjennomsiktig bakgrunn, ideelt for avatarer!
Hvorfor har avrundede hjørner grove, taggete kanter? Dette kan ha flere årsaker: 1) Lav oppløsning på originalbildet – for jevne kanter anbefaler vi minst 800×800 piksler. Mindre bilder har ikke nok piksler til å gjengi en jevn kurve. 2) Sterk JPG-komprimering – prøv PNG-utdata for bedre kvalitet. 3) Nettleser – eldre nettlesere har ikke like god anti-aliasing. Vårt verktøy bruker Canvas API med anti-aliasing, men kvaliteten avhenger også av inndatabildet.
Kan jeg stille inn forskjellige avrundinger for hvert bilde under batchbehandling? Nei – batchbehandling bruker samme innstillinger på alle opplastede bilder samtidig. Dette er hovedfordelen – hastighet og konsistens. Hvis du trenger individuell avrunding for hvert bilde (f.eks. bilde 1 har 10 %, bilde 2 har 20 %), må du behandle dem enkeltvis eller i flere omganger med samme innstillinger.
Påvirker avrunding av hjørner kvaliteten på originalbildet? Nei, hvis du velger riktig utdataformat. Ved bruk av PNG (tapløs komprimering) eller JPG/WebP med 90-100 % kvalitet er prosessen praktisk talt tapløs. Avrundingen skapes ved hjelp av Canvas API-klipping – de originale pikslene innenfor det avrundede området forblir uberørte. Den eneste endringen er hjørnene, der bakgrunnen legges til (gjennomsiktig/hvit/svarte/tilpasset).
Fungerer verktøyet offline uten internettilkobling? Ja! Etter første gangs lasting av siden lagres verktøyet i nettleserens hurtigbuffer (takket være service worker). Ved neste besøk, selv uten internett, fungerer verktøyet fullt ut. Bilder behandles lokalt i nettleseren din, så du trenger ikke internett selv under behandlingen. Ideelt for arbeid på farten eller på steder med dårlig signal.
Behandler dere bilder på serveren deres? Absolutt ikke! Alt kjører 100 % lokalt i nettleseren din ved hjelp av HTML5 Canvas API og JavaScript. Bildene blir ikke lastet opp noe sted, de forlater ikke datamaskinen din, og vi har ikke tilgang til dem. Derfor fungerer verktøyet også offline og er trygt selv for konfidensielle firmamaterialer eller personlige bilder. Ingen informasjonskapsler, ingen sporing, ingen datalagring.
Hvordan avrunder jeg hjørner basert på nøyaktige CSS-verdier (f.eks. border-radius: 16px)? Hvis du jobber i henhold til et **designsystem** og trenger nøyaktig 16px avrunding (akkurat som CSS border-radius: 16px), følg disse trinnene: 1) Bytt enheter fra "Prosent" til "Piksler". 2) Sett glidebryterne til verdien 16. 3) Sørg for at hjørnene er koblet sammen (🔗) for en enhetlig avrunding. Den resulterende filen vil ha en nøyaktig 16px radius, konsistent med ditt CSS-design.
Kan jeg lage asymmetrisk avrunding (hvert hjørne forskjellig)? Ja! Dette er en av verktøyets avanserte funksjoner. Klikk på låsikonet (🔓) for å koble fra hjørnene. Da kan du justere hvert hjørne individuelt ved hjelp av separate glidebrytere. Du kan skape interessante effekter, f.eks.: kun de nedre hjørnene avrundet (moderne kortdesign), ett hjørne betydelig mer (asymmetrisk komposisjon), eller øvre venstre + nedre høyre (diagonal dynamikk). Bruk det kreativt!

Forskjellen fra CSS border-radius

Hvorfor ikke bare CSS?

CSS border-radius fungerer kun i nettleseren – det avrunder ikke den faktiske bildefilen. Dette betyr:

  • ❌ Du kan ikke avrunde et bilde for Instagram, e-post, utskrift
  • ❌ Støtter ikke gjennomsiktig bakgrunn (skaper kun en visuell illusjon)
  • ❌ Fungerer ikke utenfor nettet (PowerPoint, PDF, Word)

Vårt verktøy skaper en faktisk avrundet fil:

  • ✅ Du laster ned et faktisk redigert bilde
  • ✅ Den gjennomsiktige bakgrunnen er faktisk gjennomsiktig (alfakanal)
  • ✅ Kan brukes overalt (web, utskrift, apper, sosiale medier)
  • ✅ Én fil, ingen ekstra CSS-kode

Fordeler sammenlignet med Photoshop og andre programmer

✅ Ingen installasjon – start direkte i nettleseren ✅ Multiplattform – Windows, Mac, Linux, Android, iOS ✅ Helt gratis – ingen begrensninger, ingen vannmerker ✅ Enklere enn Photoshop – 3 klikk vs. 10+ trinn ✅ Raskere – ingen ventetid for å starte programmet ✅ Batchbehandling – rediger titalls bilder samtidig ✅ Forhåndsinnstillinger – ingen manuelle radiusberegninger ✅ Sikkert – bildene forlater ikke datamaskinen din

Sikkerhet og personvern

Bildene dine forlater aldri datamaskinen din. Behandlingen skjer 100 % lokalt i nettleseren din ved hjelp av moderne webteknologier.

Hva betyr det?

  • ✓ Ingen opplasting til server
  • ✓ Ingen datalagring
  • ✓ Fungerer selv uten internett (etter lasting)
  • ✓ Vi har ikke tilgang til bildene dine

Ideelt for:

  • Konfidensielle firmamaterialer
  • Personlige bilder
  • NDA-prosjekter
  • Sensitive data

Etter at nettleseren lukkes, slettes alle midlertidige data automatisk.

Start nå – last opp ditt første bilde og lag moderne avrundede hjørner på sekunder. Enkelt, raskt, sikkert.