htmlcssbordergiphy

Giphy TV border radius

I put the Giphy TV in my site. Now I want to give it rounded borders, but I dont succeed. Can someone help me out?

https://giphy.com

Giphy TV code:

<div id="_giphy_tv"></div>
<script>
var _giphy_tv_tag="giphytrending";
var g = document.createElement('script'); g.type = 'text/javascript'; g.async = true;
g.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'giphy.com/static/js/widgets/tv.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(g, s);

You can also copy it from the site. Thanks.

Solution

  • After some quick research:

    #asdf-container {
  border-radius: 30px !important;
}
#asdf-wrapper {
  background-image: none !important;
}

    Both rules need to be flagged !important because that's what they already come in from giphy side.

    https://jsfiddle.net/hykoyqo5/