Borders, corner radius, and shadows control the framing of each thumbnail in a Gallery. Use them to give items a soft card-like feel with rounded corners and a drop shadow, a hard editorial look with a thin dark border, or anything in between. All three groups are independent — turn on what you need and leave the rest off.
Location Gallery Editor → Settings → Styling → Thumbnails
Border Radius #
The Border Radius group controls how much each thumbnail’s corners are rounded. The control is four-sided, so each corner can be set independently — useful when a Gallery sits flush against a heading or another section and you want the top corners square and the bottom corners rounded.
Thumbnail Border Radius
| Setting | Thumbnail Border Radius |
| Range | 0–50 |
| Default | 0 |
| Units | px |
Corner radius is responsive — desktop, tablet, and mobile each have their own value. By default all three are 0. Click the device icons in the editor to set a different radius for smaller viewports.
Border #
The Border group adds a coloured outline around each thumbnail. The border is disabled by default. Turn it on with the toggle, then configure width, colour, and style.
Enable Border
| Setting | Enable Border |
| Options | On Off |
| Default | Off |
When enabled, the Border Width, Border Color, and Border Style controls become active.
Border Width
| Setting | Border Width |
| Range | 0–10 |
| Default | 1 |
| Units | px |
| Visible when | Enable Border is on |
Width is four-sided and responsive — set a different width for top, right, bottom, and left, and a different value per breakpoint. A common pattern is 0 on three sides and a non-zero value on one side to create a divider line under the items.
Border Color
| Setting | Border Color |
| Default | #000000 |
| Visible when | Enable Border is on |
Accepts any colour, including transparency via the alpha channel in the colour picker.
Border Style
| Setting | Border Style |
| Options | Solid Dashed Dotted Double |
| Default | Solid |
| Visible when | Enable Border is on |
Maps directly to the CSS border-style property — Solid for a continuous line, Dashed for a dashed line, Dotted for a dotted line, and Double for two parallel lines. Double only renders correctly when Border Width is at least 3.
Borders sit outside the thumbnail’s area and add to its rendered size. If you mix a border with a fixed grid layout, the visible item will be slightly larger than the configured cell size.
Shadow #
The Shadow group adds a drop shadow behind each thumbnail. Shadows are disabled by default. Turn the group on, then configure colour and the four offsets that make up a CSS box-shadow.
Enable Shadow
| Setting | Enable Shadow |
| Options | On Off |
| Default | Off |
Shadow Color
| Setting | Shadow Color |
| Default | rgba(0, 0, 0, 0.5) |
| Visible when | Enable Shadow is on |
Defaults to 50% black. Reducing the alpha value softens the shadow; tinting the colour (for example a warm grey or a near-black blue) gives a more natural look against coloured backgrounds.
Horizontal Offset
| Setting | Horizontal Offset |
| Range | −50 to 50 |
| Default | 0 |
| Units | px |
| Visible when | Enable Shadow is on |
Positive values push the shadow to the right; negative values push it to the left.
Vertical Offset
| Setting | Vertical Offset |
| Range | −50 to 50 |
| Default | 4 |
| Units | px |
| Visible when | Enable Shadow is on |
Positive values push the shadow down; negative values lift it up. The default of 4 produces the standard “card sitting on the page” effect.
Blur
| Setting | Blur |
| Range | 0–50 |
| Default | 10 |
| Units | px |
| Visible when | Enable Shadow is on |
Higher values produce a softer, more diffuse shadow. 0 produces a hard-edged shadow with no falloff.
Spread
| Setting | Spread |
| Range | −20 to 20 |
| Default | 0 |
| Units | px |
| Visible when | Enable Shadow is on |
Spread grows or shrinks the shadow before the blur is applied. Positive values make the shadow extend further than the item; negative values pull it in, which is useful for a tight, contained drop shadow.
Each shadow control is responsive — the same offsets, blur, and spread can be tuned per device. A shadow that reads well on desktop is often too large for mobile, so a smaller blur and a tighter vertical offset usually looks better on small screens.
Tips #
Borders and shadows combine. A thin border with a soft shadow gives Galleries a polished editorial card style; pair a non-zero Border Radius with a generous Blur and a low-alpha Shadow Color to get the soft floating look common in modern photography portfolios.
The Border Radius group also affects how the shadow follows the corners — round corners produce a rounded shadow, square corners produce a square one. Adjust the two together rather than in isolation.
All three groups apply to thumbnails in the Gallery grid. The full image shown inside the Lightbox uses its own appearance settings — see Lightbox: Layout & Appearance and Lightbox: Custom Colors for those controls.
