Rounded corners can make your galleries feel softer, cleaner, and more modern. They’re also great for matching a brand style that uses pills, cards, and smooth UI elements.
In WordPress, there are two common ways to round gallery images. The default Gallery block lets you do it, but you have to adjust each image individually. If you want a faster, consistent look across the whole gallery, the Galleryberg block gives you a single control to round all images at once—with optional per‑image overrides.
In this tutorial, I’ll show both workflows step‑by‑step so you can pick the one that fits your setup.
Method 1: Using the Default WordPress Gallery Block
The built‑in Gallery block is simple and fast, but it doesn’t offer a gallery‑wide border radius control. You must set the radius on each image inside the gallery.
Step 1: Add or Select Your Gallery
- Open the post/page in the block editor (Gutenberg).
- Insert a Gallery block, or select an existing one.
Step 2: Select an Image Inside the Gallery
- Click an Image in the gallery (callout 1 in the screenshot).
- This selects the Image block and shows the right‑hand Block settings.
Step 3: Change the Radius for That Image
- Open the Styles tab (icon callout 2) and scroll to Border & Shadow → Radius (callout 3).
- Enter a value (e.g., 24px) to round the corners of that single image.
Repeat Steps 2–3 for the rest of the images you want to round. There is no native “apply to all images” control in the default Gallery block.
Tips
- Circle thumbnails: Use 50% radius on square images to get circles.
- Spacing matters: Increase image gap/columns so rounded corners don’t look cramped.
Pros & Cons (Default Gallery)
Pros
- No extra plugin required.
- Familiar, lightweight workflow.
Cons
- No gallery‑wide radius—must edit image by image.
- Limited styling controls, hover effects, and layouts.
Method 2: Using the Galleryberg Gallery Block (Recommended)
If you want precise styling and beautiful layouts, use Galleryberg—a Gutenberg gallery block built for design flexibility. It includes a global Images Border Radius control that applies to all images at once, plus optional per‑image overrides.
Step 1: Insert the Galleryberg Block
- Click + and search for Galleryberg.
- Choose Grid, Masonry, or Justified.
Step 2: Add Images
- Upload or select from the Media Library, then reorder as needed.
Step 3: Round All Images in One Go
- With the Galleryberg Gallery block selected (callout 1), open the Styles tab (callout 2).
- Under Border, set Images Border Radius (callout 3)—e.g., 24px.
- All thumbnails update instantly.
Step 4: (Optional) Override a Single Image
- Click an individual image and set a custom radius to make it stand out.
- Combine with Hover effects, Captions, and the built‑in Lightbox for a refined experience.
Step 5: Adjust Spacing & Responsiveness
- Tweak Block Spacing so rounded edges aren’t cramped.
- Preview on mobile and tablet to confirm the look.
Pros & Cons (Galleryberg)
Pros
- Global Images Border Radius + per‑image overrides.
- Multiple layouts (Grid, Masonry, Justified), hover effects, and lightbox.
- Fast, visual customization.
Cons
- Requires installing a plugin (free).
Quick Comparison
| Feature | Default Gallery | Galleryberg |
|---|---|---|
| Border radius control | Per‑image only | Global “Images Border Radius” + per‑image override |
| Layouts | Basic grid | Grid, Masonry, Justified |
| Hover effects | Limited | Multiple effects |
| Lightbox | Basic/Theme‑dependent | Built‑in, clean |
| Speed to set up | Fast | Fast (after install) |
FAQs
What border radius should I use?
Common choices are 8–16px for a subtle, modern look. Use 20–24px for softer cards, and 50% for circles (square images only).
Will border radius affect SEO?
No—radius is purely visual. For SEO, focus on alt text, captions, and image optimization.
Why don’t I see a Border panel?
Some themes hide certain block supports. You can still add radius with a tiny CSS snippet (see below).
Optional CSS Fallback (Any Theme)
If your theme doesn’t expose border controls, you can add this under Appearance → Editor → Styles → Additional CSS (or Customizer → Additional CSS):
/* Round corners on images inside core Gallery */
.wp-block-gallery .wp-block-image img {
border-radius: 12px; /* change to taste */
}
/* If your theme uses figure wrappers */
.wp-block-gallery .wp-block-image {
overflow: hidden; /* ensures corners don’t show square backgrounds */
border-radius: 12px;
}
Wrap‑Up
Changing the image border radius is a small tweak that makes a big visual difference. The default Gallery block handles the basics, while Galleryberg gives you precise controls, better layouts, and a beautiful lightbox.
Try Galleryberg to create clean, rounded galleries in WordPress—fast, responsive, and easy to style.
Leave a Reply