Utiliome

Runde bildehjørner

Legg til jevne avrundede kanter, pilleform eller full sirkelbeskjæring med valgfri ramme og gjennomsiktig bakgrunn.

Ingen opplastingerIngen påmeldingPartibehandling
HjørneradiusUniform eller 4-hjørneKantlinjeFør/etterBatch ZIP
Last ned rundet bilde
Frakoblet motor klar100 % privat arbeidsområde i nettleseren • Null opplastinger til skyen
Verktøy du kanskje også trenger

Relaterte verktøy

Beskjær bilde

Beskjær og trim bildene dine direkte i nettleseren.

Endre bildestørrelse

Endre bildedimensjoner og skaler opp eller ned lokalt i nettleseren din.

Konverter bildeformat

Konverter bilder umiddelbart mellom PNG, JPG, WEBP og GIF formater.

Komprimer bilde

Reduser bildets filstørrelse betydelig (JPG, PNG, WebP) uten å miste visuell kvalitet.

Vannmerke Bilde

Stemple tilpasset tekst som vannmerker over bildene dine umiddelbart for å beskytte din intellektuelle eiendom.

Vend bilde

Vipp bildene dine horisontalt eller vertikalt umiddelbart i nettleseren din.

100 % privat • Ingen filserveropplasting

Hvorfor bruke vår hjørneavrunding for bilder?

Bygget fra grunnen av for strengt personvern, umiddelbar utførelse og null friksjon. Ingen abonnementer, betalingsmurer eller kontoregistreringer kreves.

100 % personvern for lokal nettleser

All hjørneklipping og alfamaskering kjøres i nettleseren din via HTML5 Canvas API. Dine private bilder, UI-skjermbilder og avatarer forlater aldri enheten din.

Uniform eller 4-hjørnes kontroll

Juster en enkelt prosentvis glidebryter fra subtile 8 % korthjørner opp til en 100 % full sirkel, eller lås opp individuelle skyveknapper øverst til venstre, øverst til høyre, nederst til høyre og nederst til venstre.

Egendefinert kantlinje og matt fyll

Legg til en skarp kantring med kantlinje (0px til 20px) i alle sekskantede farger, og hold beskårne ytre hjørner 100 % gjennomsiktige eller fylt med en solid bakgrunnsmatt.

Satsvis behandling av flere bilder

Last opp dusinvis av produktbilder eller teamhodebilder samtidig, forhåndsvis hvert bilde med en interaktiv Før/Etter-glidebryter, og last ned alle avrundede bilder som et ZIP-arkiv.

Utiliome vs tradisjonelle skyalternativer

Sammenlign vår lokale første WebAssembly-motor med eldre skyverktøy.

Funksjon Utiliome (lokal nettleser) Eldre skykonverterere
Personvern og filsikkerhet 100 % lokal nettleser-RAM (Null serveropplastinger) Laster opp private bilder og avatarer til eksterne skyservere
Hjørnegeometrikontroll Uniform Circle/Squircle + uavhengige 4-hjørnes glidere (TL, TR, BR, BL) Låst til én enhetlig radius for alle 4 hjørner
Border Stroke & Background Matt Anti-Aliased innfelt kant (0–24 px) + transparent eller tilpasset sekskantmatt Ingen grensestrek; eksporterer ofte JPEGs med sorte hjørneartefakter
Batch arbeidsflyt og eksport Multi-Image Tab Workspace, Live før/etter-glidebryter og 1-klikks batch ZIP Enkeltfilopplastingskøer eller batchnedlastinger med betalingsmur
Slik fungerer det

Slik bruker du Runde bildehjørner i 3 enkle trinn

Ingen programvareinstallasjon kreves. Alt kjører direkte i nettleseren din.

1

Last opp ett eller flere bilder

Dra og slipp JPG, PNG, WebP eller AVIF-filer i slippsonen, eller klikk for å velge bilder fra enheten din.

2

Juster hjørneradius og kantslag

Velg Ensartet modus (eller klikk på forhåndsinnstillingen 50 % sirkel) eller bytt til uavhengig 4-hjørnes modus, og legg eventuelt til en egendefinert kantlinje og bakgrunnsmatt.

3

Eksporter transparent PNG, WebP eller batch ZIP

Sammenlign resultatet med den interaktive Før/Etter-glidebryteren og last ned individuelle filer eller et komplett ZIP-arkiv.

Hvordan Sub-Pixel hjørneavrunding og alfaklipping fungerer

Kort svar: Avrundede bildehjørner erstatter skarpe 90-graders ytre piksler med en jevn Bézier-buebane på et HTML5 2D-lerret. Når de eksporteres som en 32-bits RGBA PNG eller tapsfri WebP, beholder de avklippede ytre hjørnene en ekte null-alfakanal slik at bildet blander seg sømløst over enhver lys eller mørk bakgrunn.

Standard rektangulære bilder (JPG, PNG, WebP) lagre piksler i et stivt kartesisk rutenett. Mens nettutviklere kan bruke visuell avrunding på en nettside ved hjelp av CSS border-radius egenskap, endrer ikke CSS-stiler den underliggende bildefilen – noe som betyr at eksporterte eiendeler limt inn i e-postnyhetsbrev, Notion-dokumenter, Figma-tavler, presentasjonslysbilder eller PDF-dokumenter går tilbake til skarpe 90-graders hjørner.

Vårt Runde bildehjørner-verktøy baker permanent jevne, kantutjevnede kvadratiske kurver direkte inn i bildets alfakanal ved hjelp av maskinvareakselerert CanvasRenderingContext2D.arcTo() klippebaner:

Innstilling av hjørneradius Effektiv geometri Beste bruksområde Anbefalt eksportformat
8 % – 16 % radius Subtil UI-kortmykning App Store-skjermbilder, SaaS-bloggbilder, Notion-innbygging PNGellerWebP (Transparent)
24 % – 35 % radius Squircle / moderne appikon utseende Merker i iOS-stil, produktminiatyrbilder, sosiale kort PNG (32-biters RGBA)
100 % radius (50 % halvdimensjon) Perfekt sirkel eller pillekapsel Profilavatarer, Discord/Slack-ikoner, e-postsignaturer PNG (Transparent)
Asymmetrisk 4-hjørne (TL/TR bare) Toppavrundet fane eller modal overskrift E-postheltebannere, kortoverskrifter, UI-modeller PNGellerJPG (med matt fyll)

Hvis du trenger å trimme overflødig bakgrunn før du runder avataren til en perfekt sirkel, må du først ramme inn motivet til en 1:1 kvadrat ved å bruke Crop Image-verktøyet vårt.

Uniforme sirkelavlinger vs. uavhengig 4-hjørnesasymmetri

Kort svar: Ensartet modus bruker nøyaktig samme krumning i alle fire hjørner – forvandler firkantede bilder til perfekte sirkler med 100 % radius og rektangulære bilder til stadionpilleformer. Uavhengig 4-hjørne-modus lar deg angi distinkte prosenter for topp-venstre, topp-høyre, nedre-høyre og nedre-venstre hjørner.

Ulike designsystemer krever forskjellige hjørnegeometrier:

  • Full sirkulære avatarer (100 % Ensartet radius på 1:1 kvadrat): Hvis du setter radiusglidebryteren til 100 % (som tilsvarer 50 % av bildets korteste side) forvandler et hvilket som helst firkantet hodebilde til en skarp sirkel med glatte kantkanter.
  • Pille- og kapselbannere (100 % Ensartet radius på 16:9 eller 4:3): Ved å bruke en 100 %-radius på et bredt landskapsbilde skapes en moderne stadion- eller kapselform uten å forvrenge motivet.
  • Asymmetriske blad- og tabulatorformer (4-Corner-modus):Ved å bytte til Individuell hjørnekontroll kan du bare runde topp-venstre og topp-høyre hjørner (25% / 25% / 0 % / 0 %) for e-postkortoverskrifter, eller runde motsatte diagonale hjørner (40 % / 0 % / 40 % / 0 %-bladformede) for å lage portrette organiske rammer.

Legge til anti-aliaserte kantstreker og velge bakgrunnsmatter

Kort svar: Bruk en gjennomsiktig bakgrunn med PNG eller WebP eksport når det avrundede bildet ditt vil sitte på overflater med farge, gradient eller mørk modus. Hvis du må eksportere som en JPEG – som ikke støtter alfa-transparens – velg en tilpasset hvit, svart eller sekskantet bakgrunnsmatt slik at de avklippede hjørnene samsvarer med målsiden din.

En av de vanligste feilene ved avrunding av bildehjørner er eksport til JPEG uten å angi en bakgrunnsmatt, noe som får nettlesere til å fylle de gjennomsiktige ytre hjørnene med helt svart (#000000).

Studioredigereren vår gir deg full kontroll over både den ytre matte og en valgfri Inset Border Ring:

  1. Transparent Alpha (PNG / WebP): Etterlater de ytre hjørnetrekantene helt gjennomsiktige (rgba(0,0,0,0)). Ideell for nettsteder, lysbildestokker og designoverlegg.
  2. Solid Background Matt (White, Black eller Custom Hex): Fyller det avklippede hjørneområdet med en eksakt merkefarge før det avrundede bildet tegnes – viktig når du eksporterer lette JPEG-filer for eldre e-postklienter.
  3. Egendefinert kantlinje (0px – 20px): Tegner et sentrert, kantutjevnet vektorstrek langs den nøyaktige avrundede konturbanen slik at avatarer og skjermbilder dukker opp mot bakgrunner med lav kontrast. Trenger du å redusere filvekten etter eksport av en 32-bit PNG? Kjør filen gjennom vårt Compress Image-verktøy.

100 % batchbehandling på klientsiden for UI-sett og teamkataloger

Kort svar: Last opp flere bilder samtidig for å bruke konsekvent hjørneavrunding, kantbredder og eksportformater på tvers av en hel mappe, eller tilpass hver fane individuelt før du laster ned et enkelt ZIP-arkiv – alt behandlet lokalt i nettleseren din.

Forberedelse av et konsistent sett med 20 ansatthodebilder eller 15 SaaS-dokumentasjonsskjermbilder manuelt i stasjonær programvare krever kjedelig lagmaskering og repeterende eksport.

Med Utiliomes multifaneredigering kan du slippe en hel gruppe bilder inn i arbeidsområdet samtidig:

  • Presisjon per fane:Bytt mellom opplastede bilder i den øverste fanelinjen og inspiser hver fil med den interaktive Før / Etter glidebryteren for delt skjerm.
  • Null skyopplastinger: Hver piksel forblir i enhetens lokale minne (ArrayBuffer og HTMLCanvasElement), og garanterer streng overholdelse av bedriftens NDAer og GDPR personvernstandarder.
  • Trenger du også nøyaktige pikseldimensjoner? Par avrundede hjørner med vårt Resize Image-verktøy for å standardisere alle avatarer til 400×400 px eller 800×800 px.
FAQ

Runde bildehjørner Vanlige spørsmål og teknisk veiledning

Alt du trenger å vite om å bruke Utiliomes gratis Runde bildehjørner.

Hvorfor ble de avrundede hjørnene mine svarte eller hvite etter nedlasting?

JPEG-filer støtter ikke alfa-transparens. Hvis du vil ha gjennomsiktige hjørner som blander seg over en hvilken som helst bakgrunn, velg PNG eller WebP som eksportformat og hold Bakgrunn satt til Transparent.

Hvordan beskjærer jeg et bilde til en perfekt sirkel?

Last opp et kvadratisk bilde (1:1 sideforhold), klikk på forhåndsinnstillingen 50 % (sirkel) eller dra glidebryteren Uniform Radius til 100 %, og eksporter som en transparent PNG. Hvis bildet ditt er rektangulært, kan du først beskjære det til en 1:1 kvadrat ved å bruke vårt beskjæringsverktøy.

Kan jeg runde bare to hjørner av et bilde (som øverst til venstre og øverst til høyre)?

Ja! Bytt hjørnemodus fra Uniform til 4-hjørne. Du kan deretter sette Øverst-venstre og Øverst-Høyre til ønsket prosentandel mens du holder Nederst-Høyre og Nederst-Venstre på 0 %.

Reduserer avrunding av bildehjørner bildeoppløsning eller skarphet?

Nei. Verktøyet gjengir lerretet med bildets eksakte opprinnelige pikselbredde og -høyde (skala 1:1) og endrer bare alfamasken langs hjørnebuene og valgfri kantstrek.

Kan jeg legge til en farget kant rundt mitt avrundede bilde eller sirkulære avatar?

Ja. Bruk glidebryteren Border Width (0px til 20px) og Border Color-velgeren i sidefeltet for å tegne en jevn kantlinje som følger den nøyaktige krumningen til de avrundede hjørnene dine.

Lastes bildene mine opp til en server når jeg runder hjørnene deres?

Aldri. All bildedekoding, hjørnemaskering og ZIP-pakking skjer 100 % lokalt i nettleseren din. Filene dine forlater aldri datamaskinen eller telefonen.