Giphy TV border radius

Question

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?

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.

score 0 · Answer 1 · answered Sep 19 '17 at 08:49

0

Emmm...

#_giphy_tv {
border-radius: 10px;
}

?

answered Sep 19 '17 at 08:49

sauero

259
2
15

Usually the easy approach, this does not solve the problem here. – connexo Sep 19 '17 at 10:36

score 0 · Accepted Answer · answered Sep 19 '17 at 10:34

0

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/

answered Sep 19 '17 at 10:34

connexo

53,704
14
91
128

The height comes from Javascript inline in a style-attribute on the element that has this. – connexo Sep 19 '17 at 13:18

Giphy TV border radius

2 Answers2