Search code examples
javascripthtmlcsspinterest

How to remove the board border of pinterest widget?

Can anyone please help me to remove the board border of the Pinterest Board widget!! Struggling to remove it by using "border: none" or "border: 0" but nothing is happening! 

<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://in.pinterest.com/anubhavgkp97/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

enter image description here

Solution

  • The border is actually a box-shadow.

    You can remove it with box-shadow: none.

    The Pinterest script injects a number of HTML elements in to the document with random classes making it difficult to target the required element. I would suggest adding a wrapper element to make this easier.

    .widget-wrapper > span {
  box-shadow: none;
}
    <div class="widget-wrapper">
  <a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://in.pinterest.com/anubhavgkp97/"></a>
  <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>