Runda bildhörn

Runda bildhörn online – modern design på några sekunder

Behöver du skapa runda profilbilder, runda hörnen på produktbilder eller ge foton en modern look? Vårt gratis onlineverktyg låter dig enkelt och snabbt redigera hörnen på vilken bild som helst direkt i din webbläsare. Ingen registrering, ingen programinstallation.

All bearbetning sker lokalt på din enhet – vi skickar ingenstans, dina foton förblir helt säkra hos dig. Perfekt för grafiker, webbdesigners, sociala medieansvariga och vanliga användare.

Hur man rundar bildhörn – en snabb guide

1. Ladda upp foton

Dra och släpp bilder i appen eller välj dem med knappen. Vi stöder JPG, PNG och WebP-format. Du kan ladda upp flera foton samtidigt för massbearbetning.

2. Välj förinställning eller anpassade inställningar

Börja med någon av de förberedda förinställningarna (Diskret, Medium, Stark, Cirkel) eller ställ in varje hörn individuellt för en unik effekt.

3. Anpassa detaljer

Justera rundningsradien, välj bakgrund (transparent, vit, svart, anpassad färg) och välj kurvtyp för ett perfekt resultat.

4. Ladda ner resultatet

Du kan ladda ner varje foto separat eller alla på en gång som ett ZIP-arkiv – perfekt när du arbetar med dussintals filer.

Rundningsförinställningar – snabb start

För de vanligaste användningsområdena har vi förberett 4 förinställda profiler. Bara ett klick och du kan ladda ner direkt.

Diskret rundning (5%)

När du ska använda: Modern webbdesign där du vill behålla ett skarpt, men inte för geometriskt utseende.

Idealisk för:

• Produktfoton för e-butiker
• Bilder till bloggar och artiklar
• Banners och annonser
• UI-design (applikationer, webbplatser)

Effekt: Nästan omärklig rundning som ger bilden ett mjukare, trevligare intryck utan en dramatisk förändring.

Medium rundning (10%)

När du ska använda: Ett universellt val för de flesta projekt. Rundningen är tydligt synlig men överskuggar inte bildens innehåll.

Idealisk för:

• Foton på landningssidor
• Videominiatyrer
• Teammedlemmar-sektioner
• Bildgallerier på webben

Effekt: Klassisk rundning som är standard i modern webbdesign. Ser professionellt och inbjudande ut.

Stark rundning (20%)

När du ska använda: När du vill ha ett distinkt designstatement eller om det passar ett varumärke med en lekfull karaktär.

Idealisk för:

• Kreativa portfolier
• Webbplatser och appar för barn
• Livsstilsbloggar
• Instagram grid design

Effekt: Framträdande rundning som är ett viktigt designelement. Foton får en specifik, minnesvärd look.

Cirkel (50%)

När du ska använda: Behöver du perfekt runda profilbilder eller cirkulära designelement.

Idealisk för:

• Avatarer och profilbilder
• Testimonials (kundreferenser)
• Teambilder
• Logotypplatshållare
• Profilbilder för sociala medier

Effekt: En kvadrat förvandlas till en cirkel, en rektangel till en ellips. Perfekt för att skapa en enhetlig stil för hela teamets profilbilder.

Avancerade inställningar – full kontroll

Individuell inställning för varje hörn

Behöver du inte en symmetrisk rundning? Ställ in varje hörn separat för unika, asymmetriska effekter.

Exempel på asymmetrisk användning:

• Överst till vänster och nederst till höger rundade, de andra skarpa → dynamisk, modern look
• Endast nedre hörnen rundade → design inspirerad av Material Design
• Ett hörn betydligt mer rundat → okonventionell, uppmärksamhetsfångande design

Så här gör du:

1. Klicka på låsikonen (🔓) för att koppla ur hörnen
2. Varje reglage styr ett specifikt hörn
3. Se ändringarna i realtid
4. Klicka på 🔗 för att återansluta alla hörn

Måttenheter – procent vs. pixlar

Procent (%) – rekommenderas Radien beräknas relativt till bildens storlek. 10% innebär att rundningen ser proportionerligt likadan ut på både små och stora bilder.

När du ska använda: När du bearbetar foton av olika storlekar och vill ha en enhetlig visuell effekt.

Pixlar (px) – exakt kontroll Radien har en absolut storlek oavsett bildens dimensioner. 50px kommer alltid att vara 50px.

När du ska använda: När du behöver en exakt definierad radie (t.ex. ett designsystem kräver 16px border-radius).

Välja bakgrund – vad händer med hörnen?

När du rundar hörnen måste du bestämma vad som ska visas där de skarpa kanterna tidigare fanns.

Transparent bakgrund (PNG) Hörnen blir transparenta – perfekt för användning på webbplatser med färgad bakgrund eller för ytterligare redigering i grafikprogram.

⚠️ Observera: Kräver PNG eller WebP som utdataformat. JPG stöder inte transparens!

Vit bakgrund Hörnen blir vita – ett standardval för foton som kommer att ligga på en vit bakgrund (e-butiker, tryckmaterial).

Svart bakgrund Hörnen blir svarta – använd för mörkt läge-design eller mörka bakgrunder.

Anpassad färg Välj en exakt färg med färgväljaren – perfekt matchning med färgtemat på din webbplats eller ditt varumärke.

Tips: Kopiera hexkoden för din webbplats bakgrundsfärg (t.ex. #F5F5F5) för perfekt matchning.

Kurvtyp – standard vs. smidig

Standardkurva (arcTo) Klassisk matematisk rundning som används i CSS border-radius. Skapar en enhetlig båge – exakt vad ögat är vant vid från de flesta webbplatser.

När du ska använda: För ett standardiserat, förutsägbart utseende som är kompatibelt med CSS-design.

Smidig kurva (quadraticCurve) En mjukare, organiskare kurva skapad med Bézierkurvor. Känns mjukare och mer naturlig.

När du ska använda: För konstnärliga foton, organiska designer, när du vill ha något speciellt.

Skillnad: Standardkurvan har en konstant krökning. Den smidiga kurvan är mild i början och rundar av gradvis – den känns mer ”elegant”.

Massbearbetning – spara timmar av arbete

Behöver du runda hörnen på 50 produktfoton till en e-butik? Eller skapa enhetliga profilbilder för ett helt team? Massbearbetningen gör det automatiskt.

Så fungerar det:

1. Ladda upp alla bilder på en gång (ingen gräns för antalet)
2. Ställ in rundningen – den gäller för alla foton
3. Följ förloppet – varje foto har en status ”Bearbetar…” → ”Färdig”
4. Ladda ner ZIP – alla redigerade foton i en enda fil

Exempel från verkligheten: Du har 30 teamfoton i olika storlekar och behöver göra om dem till enhetliga, cirkulära avatarer med transparent bakgrund. Hela processen tar mindre än en minut:

• Ladda upp alla (dra och släpp)
• Förinställning ”Cirkel”
• Bakgrund ”Transparent”
• Format ”PNG”
• Ladda ner ZIP
• Klart! ✓

Användningsområden – praktisk inspiration

Webbdesign och webbutveckling

Profilbilder för teamet Skapa konsekventa teamfoton med enhetlig rundning. Rekommendation: Cirkel eller 10% rundning, transparent PNG-bakgrund.

Produktfoton för e-butiker Moderna rundade hörn ger produkterna ett vänligare intryck. Rekommendation: 5–10% rundning, vit bakgrund i JPG.

Miniatyrbilder för bloggen Foton till artiklar med diskret rundning för en tydligare visuell hierarki. Rekommendation: 8–12% rundning, beroende på webbplatsens design.

Hero-sektioner och banners Framträdande rundning för element som ska fånga uppmärksamheten. Rekommendation: 15–25% rundning.

Sociala medier

Instagram-flödets rutnät En konsekvent stil tack vare enhetlig rundning. Rekommendation: 10–15% eller cirkel för omslag till höjdpunkter.

Profilbilder för Facebook/LinkedIn Förbered cirkulära avatarer med perfekt centrerat innehåll. Rekommendation: förinställningen ”Cirkel”, transparent bakgrund.

YouTube-miniatyrer Rundade element i miniatyrbilderna för en modernare look. Rekommendation: 8–12% rundning.

Marknadsföring och reklam

Banners och displayannonser Rundade hörn ger annonsen ett mer sofistikerat utseende. Rekommendation: 5–10% enligt varumärkets riktlinjer.

Presentationer och pitch decks Ett professionellt utseende på alla foton med enhetlig rundning. Rekommendation: 10% rundning.

Tryckmaterial Förbered bilder med rundade hörn till flygblad och kataloger. Rekommendation: 5–8% rundning.

Kreativa projekt

Digitala collage Kombinera foton med olika grad av rundning för konstnärliga effekter. Rekommendation: experimentera med asymmetri.

Mockups och portfolier Modern presentation av arbeten med diskret rundning. Rekommendation: 8–15% beroende på stil.

Tips och tricks från proffsen

Gyllene regeln: mindre är mer

För de flesta projekt räcker 8–12% rundning. För kraftig rundning kan se oprofessionell ut.

Konsekvens är nyckeln

Använd samma rundning på alla foton i ett projekt. Inkonsekvens ser rörigt ut.

PNG för transparens

Vill du ha transparenta hörn? Exportera alltid som PNG eller WebP, aldrig som JPG.

Asymmetri med måtta

Asymmetrisk rundning är effektfull, men överdriv inte – använd den för accenter, inte på varje foto.

Mobile first

Rundade hörn ser ännu bättre ut på mobilen än på datorn. Testa utseendet på mindre skärmar.

Bakgrund efter sammanhang

• Webbplats med vit bakgrund → vit bakgrund på fotot
• Webbplats med mörkt läge → svart eller transparent
• Färgad bakgrund → transparent PNG eller exakt matchande färg

Pixlar för designsystem

Om du arbetar efter ett designsystem (t.ex. Material Design med ett 8px-rutnät), använd pixlar som enhet för exakt konsekvens.

Cirkulära foton – centreringen är viktig

Innan du skapar en cirkel, se till att fotots huvudmotiv (t.ex. ett ansikte) är centrerat. Annars hamnar det utanför beskärningen.

Tekniska detaljer

Format som stöds

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

Maximal upplösning

Verktyget bearbetar bilder utan storleksbegränsningar. Testat med foton upp till 8K (7680×4320px).

Utdatakvalitet

• PNG: Förlustfri komprimering, 100% kvalitet
• WebP: Justerbar kvalitet 1–100% (90% rekommenderas)
• JPG: Justerbar kvalitet 1–100% (90% rekommenderas)

Renderingsteknik

Vi använder HTML5 Canvas API med kantutjämning (anti-aliasing) för mjuka kanter utan ”trappsteg”.

Vanliga frågor (FAQ)

Varför blir mitt runda foto förvrängt till en ellips?

Förinställningen ”Cirkel” fungerar perfekt på kvadratiska foton (bildförhållande 1:1). Om du laddar upp ett rektangulärt foto (t.ex. 16:9 eller 4:3) blir resultatet en ellips (oval), inte en perfekt cirkel. Lösning: Beskär fotot till en kvadrat innan bearbetningen med vårt beskärningsverktyg eller valfritt redigeringsprogram. Använd sedan förinställningen ”Cirkel” för att få ett perfekt runt foto.

Kan jag runda hörnen på en animerad GIF?

För närvarande nej – GIF-animationer stöds tyvärr inte. Verktyget bearbetar endast statiska bilder (JPG, PNG, WebP). Om du laddar upp en animerad GIF bearbetas bara den första bildrutan. För att behålla animationen behöver du ett specialiserat verktyg för GIF-redigering.

Hur skapar jag en perfekt rund profilbild?

Följ de här stegen:
1. Beskär fotot till en kvadrat (förhållande 1:1) – du kan använda vårt beskärningsverktyg
2. Ladda upp det kvadratiska fotot till verktyget för hörnrundning
3. Klicka på förinställningen ”Cirkel” (ställer in 50% rundning)
4. Välj bakgrunden ”Transparent” (viktigt för transparenta hörn)
5. Välj formatet ”PNG” (JPG stöder inte transparens)
6. Ladda ner resultatet – du har nu ett perfekt runt foto med transparent bakgrund, idealiskt för avatarer!

Varför har de rundade hörnen grova, hackiga kanter?

Det kan ha flera orsaker: 1) Låg upplösning på originalfotot – för mjuka kanter rekommenderar vi minst 800×800 pixlar. Mindre foton har inte tillräckligt många pixlar för att återge en mjuk kurva. 2) Kraftig JPG-komprimering – prova PNG som utdata för bättre kvalitet. 3) Webbläsaren – äldre webbläsare har inte lika bra kantutjämning. Vårt verktyg använder Canvas API med kantutjämning, men kvaliteten beror också på indatabilden.

Kan jag ställa in olika rundning för varje foto vid massbearbetning?

Nej – massbearbetningen tillämpar samma inställningar på alla uppladdade foton samtidigt. Det är just dess största fördel – snabbhet och konsekvens. Om du behöver individuell rundning för varje foto (t.ex. foto 1 med 10%, foto 2 med 20%) måste du bearbeta dem var för sig eller i flera omgångar med samma inställningar.

Påverkar hörnrundningen originalfotots kvalitet?

Nej, om du väljer rätt utdataformat. Med PNG (förlustfri komprimering) eller JPG/WebP med 90–100% kvalitet är processen i praktiken förlustfri. Rundningen skapas med klippning i Canvas API – originalpixlarna inom det rundade området förblir orörda. Den enda ändringen sker i hörnen, där en bakgrund läggs till (transparent/vit/svart/anpassad).

Fungerar verktyget offline utan internetanslutning?

Ja! Efter första sidladdningen sparas verktyget i webbläsarens cache (tack vare en service worker). Vid senare besök fungerar verktyget fullt ut även utan internet. Fotona bearbetas lokalt i din webbläsare, så du behöver inte internet ens under bearbetningen. Perfekt när du jobbar på språng eller på platser med dålig täckning.

Bearbetar ni fotona på er server?

Absolut inte! Allt körs 100% lokalt i din webbläsare med HTML5 Canvas API och JavaScript. Fotona laddas aldrig upp, de lämnar inte din dator och vi har ingen åtkomst till dem. Därför fungerar verktyget offline och är säkert för konfidentiellt företagsmaterial eller privata foton. Inga cookies, ingen spårning, ingen datalagring.

Hur rundar jag hörn efter exakta CSS-värden (t.ex. border-radius: 16px)?

Om du arbetar med ett designsystem och behöver exakt 16px rundning (samma som CSS border-radius: 16px) gör du så här: 1) Byt enhet från ”Procent” till ”Pixlar”. 2) Ställ in reglagen på värdet 16. 3) Se till att hörnen är länkade (🔗) för enhetlig rundning. Den färdiga filen får exakt 16px radie, i linje med din CSS-design.

Kan jag skapa asymmetrisk rundning (olika för varje hörn)?

Ja! Det är en av verktygets avancerade funktioner. Klicka på låsikonen (🔓) för att koppla ur hörnen. Därefter kan du ställa in varje hörn individuellt med separata reglage. Du kan skapa intressanta effekter, t.ex.: endast de nedre hörnen rundade (modern kortdesign), ett hörn betydligt mer rundat (asymmetrisk komposition) eller överst till vänster + nederst till höger (diagonal dynamik). Använd det kreativt!

Skillnad mot CSS border-radius

Varför inte bara CSS?

CSS border-radius fungerar bara i webbläsaren – den rundar inte den faktiska bildfilen. Det innebär:

• ❌ Du kan inte runda ett foto för Instagram, e-post eller tryck
• ❌ Den stöder inte transparent bakgrund (skapar bara en visuell illusion)
• ❌ Den fungerar inte utanför webben (PowerPoint, PDF, Word)

Vårt verktyg skapar en verkligt rundad fil:

• ✅ Du laddar ner en faktiskt ändrad bild
• ✅ Den transparenta bakgrunden är verkligen transparent (alfakanal)
• ✅ Användbar överallt (webb, tryck, appar, sociala medier)
• ✅ En enda fil, ingen extra CSS-kod

Fördelar jämfört med Photoshop och andra program

✅ Ingen installation – körs direkt i webbläsaren ✅ Plattformsoberoende – Windows, Mac, Linux, Android, iOS ✅ Helt gratis – inga begränsningar, inga vattenstämplar ✅ Enklare än Photoshop – 3 klick jämfört med 10+ steg ✅ Snabbare – ingen väntan på att programmet ska starta ✅ Massbearbetning – redigera dussintals foton på en gång ✅ Förinställningar – inga manuella radieberäkningar ✅ Säkert – fotona lämnar inte din dator

Säkerhet och integritet

Dina foton lämnar aldrig din dator. Bearbetningen sker till 100% lokalt i din webbläsare med modern webbteknik.

Vad betyder det?

• ✓ Ingen uppladdning till servern
• ✓ Ingen datalagring
• ✓ Fungerar även utan internet (efter inläsning)
• ✓ Vi har ingen åtkomst till dina foton

Idealiskt för:

• Konfidentiellt företagsmaterial
• Privata foton
• NDA-projekt
• Känsliga data

När du stänger webbläsaren rensas all tillfällig data automatiskt.

---

Kom igång nu – ladda upp ditt första foto och skapa moderna rundade hörn på några sekunder. Enkelt, snabbt och säkert.