How to add rounded corners to embedded Giphy widget

Other Questions Giphy
1

I’ve successfully embedded a Giphy widget into my website, but I’m having trouble styling it with rounded corners. The widget displays perfectly fine, but when I try to apply CSS border-radius properties, nothing seems to work.

Here’s the code I’m using for the widget:

<div id="giphy_player"></div>
<script>
var giphy_category="trending";
var embed = document.createElement('script'); 
embed.type = 'text/javascript'; 
embed.async = true;
embed.src = 'https://giphy.com/static/js/widgets/tv.js';
var firstScript = document.getElementsByTagName('script')[0]; 
firstScript.parentNode.insertBefore(embed, firstScript);
</script>

I’ve tried applying CSS directly to the container div but the rounded borders don’t appear. Has anyone dealt with this before? What’s the correct way to style this embedded content?

2

hey! I had the same issue with giphy. i wrapped mine in a div and applied border-radius + overflow:hidden on the wrapper. that worked fine since giphy widgets tend to ignore css directly on them.