Softonic

Bild med rundade hörn

Steg 1 / 3 Hörnradius

Operativsystem, appbutiker och designsystem för gränssnitt gillar alla rundade hörn – iOS-ikoner, Material-kort och moderna Tailwind-komponenter. Ladda upp valfri bild, så rundar verktyget de fyra hörnen till den radie du anger, exporterar som PNG med transparenta hörn och kan valfritt använda en annan radie per hörn för utseendet av en biljettstubbe eller pratbubbla.

Så rundar du hörnen på en bild

  1. 1

    Ladda upp en bild

    JPG, PNG eller WebP.

  2. 2

    Välj en radie

    I pixlar eller som procent av den kortare sidan.

  3. 3

    Valfritt: olika för varje hörn

    Runda bara de övre hörnen (kort) eller asymmetriskt (biljett).

  4. 4

    Välj bakgrund

    Transparent (PNG) eller en enfärgad bakgrund om du sparar som JPG.

  5. 5

    Exportera

    PNG bevarar den rundade alfakanalen; JPG plattas ut till den färg du valt.

Radieval för vanliga gränssnittsformer

Förinställningar för radie

Form Radie
Subtilt gränssnittskort 4–8 px
Material Design-kort 4 px (eller 8 px i M3)
iOS-appikon 22,37 % av sidan (“squircle”)
macOS-appikon 18,75 % av sidan
Instagram-storybubbla 12–16 px
Rundad avatar 50 % av korta sidan (helt cirkulär)
Biljettstubbe Asymmetrisk – runda bara ett eller två hörn
Chattbubblans svanssida Ett hörn litet, resten större

Squircle-problemet

iOS-ikoner är inte enkla rundade rektanglar – de använder en “superellips” som är matematiskt jämnare i övergången. Riktiga squircles går utöver vad ett CSS border-radius eller en enkel alfamask kan återge; verktyget approximerar dem med en rundad rektangel av hög ordning som ser oskiljaktig ut vid typiska ikonstorlekar.

Transparensbeteende

  • PNG-utdata är standard – de rundade hörnen blir transparenta pixlar. Användbart för appikoner, gränssnittskort och överallt där du behöver placera bilden mot en varierande bakgrund.
  • JPG-utdata kan inte vara transparent. De rundade hörnen fylls med en färg du väljer, vilket får bilden att se inramad ut.

Olika radie per hörn

Ett chattbubbleutseende: runda tre hörn till 12 px och lämna ett vid 0 px (hörnet där “svansen” skulle fästa). En biljettstubbe: två skarpa och två rundade hörn. Asymmetriska radier är ett snabbt sätt att antyda att bilden är fäst vid något annat.

Kantutjämning (anti-aliasing)

Hörnkurvorna ritas med 4× supersampling så att de ser skarpa ut vid vanliga visningsstorlekar. Utskrivet eller kraftigt inzoomat förblir radien tydligt jämn.

Vanliga frågor

Apple använder en squircle vars hörnkrökning motsvarar ungefär 22,37 % av ikonens sidlängd. På en 1024 × 1024-yta blir det cirka 229 px i effektiv hörnradie, även om den exakta matematiken skiljer sig något från en enkel rundad rektangel.

Ja. Radien tillämpas per hörn oavsett bildens bildförhållande. Vid extrema förhållanden (mycket bred eller mycket hög) ger en radie på 50 % av den korta sidan en kapselform.

Nej – JPG stöder inte transparens. Exportera filen som PNG för att bevara den rundade alfakanalen, eller välj en bakgrundsfärg för JPG-filen så fylls hörnen med den färgen.

Ja. Verktyget lägger bara till en alfamask och ändrar inte bildens storlek. Vill du kombinera avrundning med storleksändring, använd storleksändraren först.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

ARW till JPG-omvandlare

Omvandla Sony ARW RAW-foton till JPG. Få en delbar, universellt kompatibel JPEG från din kameras RAW-fil utan att öppna Lightroom.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Färgblindhetssimulator

Simulera hur en bild upplevs av personer med olika former av färgblindhet: protanopi, deuteranopi, tritanopi och achromatopsi.

Skapa en fiktiv efterlyst-affisch

Skapa en textaffisch om en påhittad figur med harmlösa uppslag, tydliga fiktionstexter samt lokal TXT-fil eller utskrift.

Skapa korsstygnsmönster

Gör JPEG, PNG eller WebP till ett utskrivbart korsstygnsdiagram med 10–150 stygn, 2–40 egna färger, symboler, exakta antal och tygmått.

Verktyget finns på andra språk