Purpose-Built Templates

ZU2B Blueprints

Business in a Box

  • Purpose-built launch kits for local service businesses — website, copy, prompts, SEO, and more.
  • Local Launch Kits →

Website Widgets

  • Working features you install once and own outright — no plugin, no subscription.
  • Chat Widget — Coming Soon

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free

When a Styled Border Around a Third-Party Embed Is Missing Its Bottom Edge

Field Note #163
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Check whether a fixed `height` (rather than `min-height`) is being forced onto a container whose actual content comes from an external widget you don't fully control the internal padding of.
2. Check for `overflow: hidden` on the container or a parent element that could be clipping content taller than the fixed height.
3. Add `box-sizing: border-box` if border width isn't already being accounted for inside the stated dimensions.

Was this helpful? Thanks for the feedback!
The symptom
A custom-styled border (border, border-radius, background color) was applied around a third-party embedded input box (Google Programmable Search Engine). The border appeared correctly on the top and sides, but the bottom edge of the border was not visible.

Initial assumption
The first instinct was that the border-radius or border shorthand was written incorrectly.

The CSS syntax itself was correct.

Investigation
The styled container had a fixed `height` value applied (`height: 38px`). The third-party widget’s own internal padding and content pushed its actual rendered height slightly past that fixed value. Combined with the widget’s own internal overflow handling, the extra height was being clipped rather than allowed to expand the visible container — cutting off the bottom portion of the border along with it.

What to check

When a styled border around a third-party embed is partially missing or clipped:

1. Check whether a fixed `height` (rather than `min-height`) is being forced onto a container whose actual content comes from an external widget you don’t fully control the internal padding of.
2. Check for `overflow: hidden` on the container or a parent element that could be clipping content taller than the fixed height.
3. Add `box-sizing: border-box` if border width isn’t already being accounted for inside the stated dimensions.

Current finding
Switching the fixed `height` to a `min-height`, explicitly setting `overflow: visible`, and adding `box-sizing: border-box` allowed the container to size itself to the widget’s actual rendered content, restoring the full visible border.

Troubleshooting lesson
When styling a wrapper around a third-party embed whose internal markup and padding you don’t control, prefer `min-height` over a fixed `height`. A fixed height that’s even slightly smaller than the embeds real rendered content can silently clip visual details like borders, with no error and no obvious cause in the CSS itself.

Tagged in :

More from the field