Afgeronde hoeken in Squarespace afbeeldingen? Zo doe je dat!
De gids voor blog en website afbeeldingen met afgeronde hoeken
Wil je dat alle afbeeldingen in je Squarespace blogposts een consistente, professionele uitstraling krijgen met ronde hoeken, zonder dat je elke afbeelding handmatig hoeft te bewerken? Met deze simpele tutorial laat ik je zien hoe je met een korte code een border radius kunt toepassen op alle afbeeldingen in je blogposts, zelfs als je er honderden hebt. Geen ervaring met design of code? Dit is de eenvoudige manier om dat te doen!
Waarom afbeeldingen afronden in Squarespace
Ronde hoeken geven je Squarespace website een moderne en vriendelijke uitstraling. Of je nu een persoonlijke blog of zakelijke website beheert, afgeronde afbeeldingen voegen direct charmante professionaliteit toe.
Handmatig elke afbeelding aanpassen kan echter uren kosten, vooral als je tientallen of honderden blogposts hebt. Gelukkig is er een snellere, site-brede oplossing.
Afgeronde hoeken doen meer dan alleen mooi ogen:
Moderne uitstraling: Rondhoeken sluiten aan bij hedendaagse webdesigntrends en geven je site een professionele look.
Verbeterde gebruikerservaring: Afgeronde randen maken afbeeldingen zachter en aangenamer voor bezoekers.
Focus op content: Door scherpe hoeken te vermijden, wordt de aandacht subtiel naar de inhoud van de afbeelding geleid.
Consistente stijl: Een uniforme afronding zorgt voor harmonie en overzicht.
Afgeronde hoeken toepassen op individuele afbeeldingen
Squarespace heeft in de Image Block Editor een ingebouwde optie om de corner radius aan te passen. Zo pas je dit toe:
Open de pagina of post in de editor.
Klik op het Image Block dat je wilt aanpassen.
Ga naar Design > Corner Radius en kies de gewenste afronding.
Tip: Voor een subtiele, moderne uitstraling gebruik je vaak 8–12px, voor een opvallender effect kun je hoger gaan.
Nadeel: deze methode werkt alleen per afbeelding en biedt geen website brede consistentie.
Alle afbeeldingen website breed afronden met code
Wil je dat alle afbeeldingen (Image Block) op je Squarespace website automatisch ronde randen krijgen, dan kun je dat eenvoudig doen met deze Custom CSS code:
img {
border-radius: 10px !important;
}
Volg deze stappen:
Ga in je Squarespace dashboard naar Pages > Custom code (helemaal onderin) > Custom CSS om de CSS editor te openen.
Kopieer en plak bovenstaande code in het Custom CSS veld. Deze regel zorgt ervoor dat alle afbeeldingen (in blogs, galerijen en andere secties) een uniforme afgeronde hoek krijgen.
Pas de radius aan naar jouw smaak. Wil je subtieler afgeronde afbeeldingshoeken? Verlaag de waarde (bijv. 8px). Wil je grotere rondingen? Verhoog de waarde (bijv. 30px of meer).
Klik op Save en gebruik de Preview functie om te controleren of de ronde hoeken eruitzien zoals je wilt.
TIP: Deze code zorgt dat alle Image Block afbeeldingen op je website een uniforme afronding krijgen. Voor sommige specifieke secties zoals blog overzichtsafbeeldingen of product thumbnail weergaven kun je aanvullende codes gebruiken, maar bovenstaande code is de snelste manier om dit globaal instellen.
Ronde hoeken in blogposts en blogoverzicht pagina
De standaard CSS code werkt niet voor thumbnails in blogoverzichten. Gebruik in dat geval specifieke selectors:
/* Afbeeldingen binnen blogposts */
.blog-item-content-wrapper .sqs-image-shape-container-element {
border-radius: 10px;
}
/* Blog overzicht grid layout */
.blog-basic-grid .image-wrapper {
border-radius: 10px;
}
/* Blog overzicht side by side layout */
.blog-side-by-side .image-wrapper {
border-radius: 10px; }
/* Blog overzicht single column layout */
.blog-single-column .image-wrapper {
border-radius: 10px; }
/* Blog overzicht masonry grid layout */
.blog-masonry .image-wrapper {
border-radius: 10px; }
/* Blog overzicht alternating side by side layout */
.blog-alternating-side-by-side .image-wrapper {
border-radius: 10px; }
Met deze aanpak zorg je dat alle blogafbeeldingen netjes afgerond zijn, ongeacht of het een individuele post of een overzichtspagina betreft.
Afgeronde afbeeldingshoeken in Summary Block en blogposts
Summary Blocks gebruiken een andere HTML-structuur. Gebruik daarom:
/* Afbeeldingen in blog summary blocks */
.summary-thumbnail-container * {
border-radius: 10px !important;
}
Zo krijgen alle thumbnail-afbeeldingen binnen summary blocks een uniforme afronding.
Dit is belangrijk voor een professioneel en consistent webdesign in Squarespace.
Mijn tips als Squarespace website expert
Consistentie: Gebruik dezelfde border-radius over je hele website om een uniforme uitstraling te behouden.
Mobiel testen: Controleer ronde hoeken op mobiele apparaten, want deze kunnen anders ogen dan op desktop.
Uitzonderingen maken: Wil je alleen contentafbeeldingen afronden? Sluit logo’s en iconen uit met specifieke CSS-selectors.
Subtiele variatie: Voor hero-afbeeldingen of banners kan een iets andere radius een eleganter effect geven.
Veelgemaakte fouten vermijden
Alleen de editor gebruiken voor websitebrede afronding (werkt niet overal).
Niet testen op verschillende blog layouts (grid, masonry, side-by-side).
CSS toevoegen zonder !important, waardoor stijlen soms worden overschreven.
Afbeeldingen te extreem afronden waardoor het design inconsistent oogt.
Samenvatting van de aanpak per context
Context
Werkt via editor?
CSS nodig?
Image block (individueel)
✅
Nee
Alle afbeeldingen website breed
❌
Ja
Blogpost Image lock
✅ / ❌
Nee Image Block, ja website breed
Blog overzicht thumbnails
❌
Ja
Summary block
❌
Ja
Het resultaat: een stijlvolle en professionele website
Het toepassen van ronde randen in Squarespace is een kleine aanpassing met esthetische impact. Door de juiste CSS code en instellingen te gebruiken, zorg je dat alle afbeeldingen, inclusief blogs en summary blocks, professioneel en uniform worden weergegeven. Zo straalt je website kwaliteit uit, oogt modern en blijft het design consistent . Precies wat bezoekers en klanten waarderen.
