Border, Shadow & Box Styling
The finishing touches on any hover effect are the borders, shadows, and box styling. These details elevate a hover effect from good to polished. Image Hover Effects Ultimate gives you fine control over borders, border radius, box shadows, and text shadows. Here’s how to use each one.
Border Radius (Rounded Corners)
Border radius controls the roundness of your image containers. It’s one of the most impactful settings for the overall look and feel of your gallery.
Common Border Radius Values
| Value | Effect | Best For |
|---|---|---|
| 0px | Sharp square corners | Corporate, editorial, grid-heavy designs |
| 4px–8px | Very slightly rounded | Modern, clean UI look |
| 12px–20px | Noticeably rounded | Friendly, approachable, lifestyle brands |
| 50% | Fully circular | Team member headshots, avatar grids |
You can set border radius in px, %, or em. For circular images, use 50%. The responsive control lets you set different values for different screen sizes.
Border
You can add a border around your image containers. Border settings typically include:
- Border width: Thickness in pixels (0 = no border)
- Border style: Solid, dashed, dotted, double
- Border color: Any color, including transparent
Creative Border Uses
- Thin white border (1–2px): Creates a subtle frame look on images, especially on dark backgrounds
- Brand-color border on hover: Use CSS to change border color on hover for an interactive framing effect
- No border (default): Most galleries look cleaner without borders; let spacing and shadows do the work
Box Shadow
Box shadow adds a drop shadow beneath (or inside) your image containers. A well-applied box shadow makes images appear to “lift” off the page — especially effective for card-based layouts like Flip Box and General effects.
Box Shadow Settings
- X offset: Shadow position left/right (0 = centered)
- Y offset: Shadow position up/down (positive = below, negative = above)
- Blur: How soft/spread out the shadow is (0 = hard edge, higher = softer)
- Spread: How much larger than the element the shadow extends
- Color: Shadow color (typically black with low opacity, e.g., rgba(0,0,0,0.2))
- Inset: Places the shadow inside the element rather than outside
Recommended Box Shadow Presets
Subtle lift (most common):
X: 0 Y: 4px Blur: 12px Spread: 0 Color: rgba(0,0,0,0.15)Medium card shadow:
X: 0 Y: 8px Blur: 24px Spread: -4px Color: rgba(0,0,0,0.25)Deep dramatic shadow:
X: 0 Y: 16px Blur: 40px Spread: -8px Color: rgba(0,0,0,0.4)No shadow: Set all values to 0, keeps the design flat and modern.
Text Shadow
Text shadow adds a subtle shadow behind your hover text. This improves readability when text sits directly on an image without a full overlay.
Text Shadow Settings
- X offset: Usually 0 or 1px
- Y offset: Usually 1–2px
- Blur: 2–4px for subtle, 8–12px for a glow effect
- Color: Usually black (rgba(0,0,0,0.5)) for dark shadows, or white for glows
Most useful setting: 0px 1px 3px rgba(0,0,0,0.6) — gives white text a subtle readable shadow against almost any image.
Inner Shadow
The inner shadow (available on some layouts) adds a vignette effect inside the image container — darkening the edges of the image on hover to create a focused, spotlight look. Set the inner shadow color to black with low-to-medium opacity (e.g., rgba(0,0,0,0.4)).
Combining Styles Effectively
The best-looking hover effects combine these properties thoughtfully:
- ✅ Rounded corners + soft shadow: Friendly card feel (Flip Box, team cards)
- ✅ Sharp corners + no shadow: Editorial, modern grid (Portfolio, photography)
- ✅ Circular border radius + thin border: Clean profile/avatar grid (Team members)
- ✅ Text shadow on white text: Ensures readability without a full overlay (Minimal captions)
Common Mistakes
- ❌ Heavy shadows on flat designs: If your site uses a flat/minimal design, large shadows look out of place. Keep blur low and opacity light.
- ❌ Border radius mismatch: If the image has a 20px border radius but the overlay doesn’t inherit it, you’ll see sharp overlay corners on rounded images. Make sure both the image and overlay share the same border radius.
- ❌ Too many shadow effects: Combining box shadow + inner shadow + text shadow can make an effect feel heavy. Use 1–2 shadow types maximum.