TIL that CSS border-radius property used to be a nightmare in older browsers

Last month I was digging through some old projects from about 3 years ago, trying to remember how I styled a button with rounded corners. Man, back then you had to write like 10 lines of code just for a simple rounded button, and it still looked different in every browser. I remember staying up late one night in 2021, testing border-radius in Internet Explorer 11 on a Windows laptop my buddy lent me. The corners would either clip weirdly or just show up as squares. I had to use vendor prefixes and even some hack with background-clip to make it work. Now I just write border-radius: 8px and it works on my phone, my work laptop, and my grandma's old tablet. Has anyone else had flashbacks to the old CSS wars with vendor prefixes?

2 comments

2 Comments

patricia_wright10d ago

Remember my buddy tried to round the corners on a login form for a client project back in 2022 and spent three hours debugging why the button had jagged edges in Firefox while it looked fine in Chrome. He eventually found some ancient Stack Overflow post mentioning a CSS hack with overflow hidden and a pseudo element. He still jokes about that incident whenever someone mentions rounded corners.

the_sage10d ago

Vendor prefixes were fine if you knew what you were doing, @patricia_wright just needed better documentation.