Three hours to center a div with a gradient border and I still haven't

Spent my whole Sunday afternoon trying to get a simple gradient border to wrap around a centered flexbox card. Just a basic card with some text inside and a cool gradient edge. I thought it would take like 20 minutes tops. But the border-image property doesn't play nice with border-radius at all, and the background-clip trick I found on Stack Overflow only worked in Chrome. Three hours later I had it looking right in Firefox but broken in Safari. Ended up using a pseudo-element with a background gradient and padding hack instead but now the text overflows on mobile. Has anyone else run into this weird gradient border issue across browsers or is it just me?

2 comments

2 Comments

evand657d ago

Ugh, that is a brutal Sunday afternoon! I've definitely been there, especially with anything border-image related. That pseudo-element padding hack you mentioned is actually my go to now, but I always end up fighting with box-sizing to keep the text from overflowing on smaller screens. You are definitely not the only one who has spent way too many hours on something that sounds so simple!

finleybutler6d ago

Pretty sure it's just borders, not brain surgery lol.