Rundade hörn och cirkelbilder för webbplatser

Rundade hörn kan få foton att passa i kortlayouter, medan cirkelformade porträtt ger teamsidor en enhetlig form. Formen ska stödja innehållet: en cirkel som kapar ett ansikte eller en rundning som döljer en viktig produktdetalj förbättrar inte bilden.

Du kan antingen ändra bildfilen eller låta webbläsaren runda dess visning på sidan. Valet beror på var resultatet ska användas och om formen behöver kunna ändras senare.

Ska du använda CSS eller redigera bildfilen?

CSS är oftast mer flexibelt på en webbplats du kontrollerar. Du kan använda samma original i olika layouter, justera hörnen på hela webbplatsen och ändra beskärningen utan en ny export. Många webbplatsredigerare har redan en inställning för hörnradie.

Redigera filen om webbplatsen eller appen tar emot bilder men saknar hörninställningar, eller om du ska lägga den rundade bilden i en annan design. De genomskinliga hörnen sparas i filen, så formen inte beror på webbplatsens CSS.

Välj form och radie efter innehållet

Börja med bildens uppgift. En cirkel kan passa ett litet porträtt där ansiktet står i fokus. Landskapsfoton, skärmbilder och produktdetaljer behöver oftast en rektangel för att behålla mer information.

Prova en måttlig radie på 12 eller 16 CSS-pixlar för webbplatskort och bedöm den bredvid kort, knappar och andra bilder. Det är designexempel, inga krav. Några gemensamma radier gör det enklare att hålla ihop utseendet än en egen rundning för varje foto.

Bedöm resultatet i den verkliga visningsstorleken. En diskret radie i en stor källa kan nästan försvinna i en miniatyr. Sparade bildhörn skalas med hela bilden. En fast CSS-radie, exempelvis 16 pixlar, behåller det CSS-måttet även när bildens visningsbredd ändras.

Ta en bild på 800 × 400 med 25% rundning i Pixilo. Den sparade radien är 50 pixlar. Vid visning i 400 × 200 halveras den synliga radien till cirka 25 CSS-pixlar. Vid 200 × 100 blir den cirka 12,5. Välj rundning utifrån storleken besökaren ser, inte bara förhandsvisningen i full storlek.

Håll viktig information borta från hörnen. Kontrollera personer vid kanterna i gruppfoton och etiketter eller kontroller i skärmbilder. Om en viktig detalj försvinner, minska rundningen eller ändra beskärningen i stället för att tvinga in bilden i formen.

Runda bildhörn med Pixilo

1. Förbered en arbetskopia. Spara originalet separat. Behöver bilden en annan form, använd först beskärningsverktyget. Är måtten för stora, ändra kopians storlek före rundningen.
2. Välj bild. Öppna Rundade bildhörn och välj en JPG, PNG eller WebP.
3. Justera Hörnrundning. Börja med ett lågt värde och öka medan du granskar förhandsvisningen. Alla fyra hörn har samma radie.
4. Välj vad som fyller de borttagna hörnen. Låt Genomskinlig bakgrund vara markerad om bilden ska passa flera sidfärger. Avmarkera för att välja en bakgrundsfärg.
5. Ladda ner och kontrollera. Välj Ladda ner PNG, öppna filen och granska kanterna mot den avsedda bakgrunden.

Verktyget behåller bildens pixelbredd och höjd. Det tar bort eller fyller hörn inom dessa mått, men ändrar inte bildstorleken eller tar bort bakgrunden bakom motivet.

Vad betyder rundningens procentsats?

Pixilo räknar radien som en procentandel av halva den kortare sidan. Vid 0% är hörnen raka, vid 100% används största möjliga cirkelradie. I exemplet 800 × 400 är halva den kortare sidan 200 pixlar, och 25% av det är 50.

Reglaget är inte samma sak som en CSS-procent. CSS beräknar horisontella procentradier från bredden och vertikala från höjden. På en yta som inte är kvadratisk ger border-radius: 50% en ellips. Pixilos 100% ger en kapsel av en rektangel och en cirkel av en kvadrat.

Skapa en cirkelbild med Pixilo

Börja med en kvadratisk bild. En bred bild förblir bred även vid maximal rundning, så bestäm beskärningen innan du gör cirkeln.

1. Beskär till 1:1. Öppna originalet i beskärningsverktyget och välj en kvadrat. Lämna plats kring huvudet eller föremålet: cirkeln döljer kvadratens hörn.
2. Välj lämpliga mått. En kopia på 320 × 320 är ett alternativ för ett porträtt som visas i 160 × 160 CSS-pixlar på en 2×-skärm. Använd storleksverktyget vid behov. Jämför detaljer i avsedd visningsstorlek och förstora inte en liten källa bara för dessa mått.
3. Runda kvadraten. Välj den förberedda bilden i Rundade bildhörn, ställ Hörnrundning på 100% och behåll Genomskinlig bakgrund.
4. Kontrollera den sparade cirkeln. Ladda ner PNG och kontrollera att huvud, hår och viktiga detaljer ryms i den synliga ytan.

Cirkeln ligger i en kvadratisk PNG med genomskinliga hörn. Filens bredd och höjd ändras inte; bara den synliga konturen blir rund. En vägg eller ett rum bakom personen syns fortfarande inuti cirkeln.

Lägg till rundade hörn med CSS

Om webbplatsredigeraren redan har en hörnradie, prova den först. Vid egen implementation måste CSS-reglerna riktas mot bildelementet:

1. Lägg till klassen. Redigerar du HTML, använd exemplet nedan eller lägg rounded-image i class-attributet på ditt befintliga <img>-element. I redigerarens CSS-klassfält skriver du namnet utan inledande punkt. Kontrollera om klassen hamnar på bilden eller ett omslutande element.
2. Lägg till CSS. Klistra in exemplet i webbplatsens stilmall eller fält för egen CSS. Behåll punkten i .rounded-image, som väljer element med den klassen. Ett CSS-fält förväntar sig normalt bara CSS, utan HTML-taggarna <style>.
3. Kontrollera den publicerade bilden. Byt sökväg och bilduppgifter om du använder HTML-exemplet. Förhandsgranska och kontrollera att andra tema- eller redigerarstilar inte skriver över resultatet.

Exemplet bevarar proportionerna och låter bilden krympa inom sin behållare:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Färdigt kök med ekskåp och bänkskiva i sten">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Använd egen sökväg, egna mått och alt-text. HTML-bredd och -höjd anger källans mått och hjälper webbläsaren att reservera plats. CSS styr visningsstorlek och hörnform. Följ samma steg för cirkelexemplet nedan, men med klassen team-avatar och dess CSS.

Om redigeraren sätter klassen på en omslutande behållare, byt CSS-selektorn från .rounded-image till .rounded-image img. För cirkeln använder du .team-avatar img i stället för .team-avatar. Då gäller storleks- och rundningsreglerna bilden inuti behållaren.

Värdet 16px rundar alla fyra hörn. CSS kan även ge olika radier: border-radius: 16px 16px 0 0 rundar bara de övre hörnen. Ordningen är övre vänster, övre höger, nedre höger och nedre vänster. Pixilo rundar för närvarande alla fyra lika. Se MDN:s referens för border-radius för syntax och procentberäkning.

CSS ändrar utseendet på sidan, inte den nedladdade källfilen. Att öppna eller spara originalet separat bevarar inte CSS-formen. Delar som CSS döljer finns också kvar i källan.

Skapa en cirkelbild med CSS

En CSS-cirkel behöver samma visningsbredd och höjd. Källfotot kan vara rektangulärt: object-fit: cover fyller kvadraten utan att förvränga personen, och radien klipper kvadraten till en cirkel.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fysioterapeut">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Här är källfilen 800 × 1200 pixlar men visas i en kvadrat på 160 × 160. Anpassa värdena efter bild och layout. Ändrar du visningsstorleken vid en mobil brytpunkt, håll bredd och höjd lika så formen förblir cirkulär.

object-fit: cover bevarar proportionerna och beskär det som inte ryms. object-position: 50% 40% centrerar horisontellt och visar, för denna stående källa, en något högre del än standardens vertikala centrering. Det zoomar inte ansiktet. Anpassa positionen för varje porträtt.

MDN beskriver object-fit och object-position mer ingående. Tvinga inte in ett rektangulärt foto i en kvadrat utan lämplig anpassning, eftersom motivet då kan sträckas.

Exempel: enhetliga teamporträtt

Anta att en mottagning har fyra personalfoton: två porträtt med huvud och axlar, en översiktsbild från behandlingsrummet och ett tätt beskuret ansikte. Teamsidan ska visa alla i cirklar på 160 × 160. Samma ytterform är bara första steget.

1. Välj en referensbeskärning. Bestäm med ett porträtt hur mycket huvud och axlar som ska synas. Lämna luft ovanför håret och lägg ögonen på ungefär samma höjd. Använd det som visuell hjälp, inte ett stelt mått för alla.
2. Matcha ansiktsstorleken. Beskär rumsbilden närmare så att personen inte verkar mycket mindre. Om närbilden redan kapar hår eller haka, använd en mindre beskuren originalbild om det finns. En större cirkel återskapar inte saknat innehåll.
3. Välj hur cirkeln skapas. För CSS förbereder du beskärningarna, använder samma ram på 160 × 160 och justerar varje position. För sparade cirkelbilder gör du likadana kvadratiska kopior, exempelvis 320 × 320 när det passar, och använder Pixilos 100% på alla.
4. Granska hela gruppen. Placera porträtten bredvid namnen i verklig visningsstorlek. Inget ansikte ska dominera enbart på grund av tätare beskärning. Granska sedan mobilen, där porträtten kan staplas.

Enhetlighet kommer även från liknande beskärning och ansiktsstorlek. Behåll användbar miljö, men lägg namn och roller i sidans text i stället för i porträttbilden.

Välj bakgrund och filformat

Spara med genomskinlighet om bilden ska fungera på flera sidfärger eller i mörkt läge. Ett vitt hörn kan smälta in på vitt men bli en fyrkantig fläck på ett mörkt kort. Vissa bildvisare visar genomskinliga delar på vitt eller ett schackmönster. Prova en annan bakgrund innan du antar att filen innehåller vita pixlar.

När Genomskinlig bakgrund är av fyller vald färg både borttagna hörn och redan genomskinliga områden. Den ersätter inte en ogenomskinlig bakgrund i fotot. Behöver du genomskinlighet efter att ha fyllt vitt, gå tillbaka till originalet och spara igen med alternativet aktiverat.

PNG bevarar genomskinlighet utan ny förstörande komprimering, men ett foto kan bli större. Jämför för webben en WebP-kopia som kan behålla genomskinligheten. Pixilos konvertering innebär kvalitetsförlust, så kontrollera kanter och detaljer. JPG kan inte bevara genomskinliga hörn. Vår guide till genomskinliga bakgrunder förklarar formatvalen.

Om formen görs med CSS behöver fotot inte vara genomskinligt. Behåll en lämplig JPG eller WebP och låt webbläsaren runda visningen. CSS komprimerar inte källan. Välj mått för layouten och jämför filstorlek och skärpa hos den levererade bilden.

Kontrollera resultatet i den riktiga layouten

• Granska motivet. Kontrollera ansikten, hår, produktkanter och text nära beskärningen. Formen ska bevara informationen som läsaren behöver.
• Kontrollera små skärmar. För en CSS-cirkel ska visningsbredd och höjd förbli lika. Granska även radien i slutlig storlek.
• Prova sidans bakgrunder. Leta efter oönskade täckande hörn eller en ljus kant på både ljusa och mörka ytor.
• Kontrollera slutversionen. Webbplatsen eller appen kan skala, beskära eller konvertera filen. Kontrollera den sparade eller publicerade kopian, även efter formatbyte.
• Behåll användbar alternativtext. Beskriv bildens funktion, inte bara formen. Ett teamporträtt ska identifiera personen i sammanhanget; dekorativa bilder behöver normalt tom alt-text. Se vår guide till alt-text och filnamn.

Vanliga frågor

Varför blev bilden oval eller kapselformad?

Kontrollera proportionerna först. Använd lika visningsbredd och höjd för en CSS-cirkel, eller beskär till en kvadrat före Pixilos 100%. Formjämförelsen ovan visar varför en rektangel får en annan kontur.

Varför är hörnen fortfarande vita?

Testa först en annan bakgrund enligt ovan. Om hörnen innehåller vita pixlar, kontrollera vald enfärgad bakgrund eller JPG-konvertering. Webbplatsen eller appen kan också ha ersatt genomskinligheten med vitt. Spara en ny genomskinlig kopia från originalet och kontrollera formatet efter publicering.

Varför är bildhörnen raka i ett rundat kort?

Rundning av det omslutande kortet klipper inte automatiskt bilden. Runda bilden själv eller använd en rundad behållare med overflow: hidden om innehållet ska klippas tillsammans. Finns interaktiva kontroller i behållaren, kontrollera att deras fokusmarkeringar för tangentbordet inte döljs.

Kan jag skapa en cirkel utan att skära bort något?

En cirkel kan inte fylla hela ramen hos ett rektangulärt foto utan att förlora yta eller ändra kompositionen. Om allt måste behållas, placera fotot i en större kvadratisk design med luft runt och kontrollera cirkelgränsen. En rektangel är ofta bättre för detaljerat innehåll.

Laddas rundade bilder snabbare?

Formen ensam garanterar inte en mindre nedladdning. Kontrollera mått och format enligt ovan och mät filen som den publicerade sidan faktiskt levererar.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)