How to remove a css border from a twitter embed?

Question

There is a grey border around all embeded tweets but I want to remove it and add round corners too. But because its in an iframe i have no idea how to remove the border.

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="zxx" dir="ltr"><a href="https://x.com/ShitpostReels/status/1991801260471681311">pic.twitter.com/e8PH5QMqWy</a></p>&mdash; 📱Shitpost Reels📱 (@ShitpostReels) <a href="https://twitter.com/ShitpostReels/status/1991801260471681311?ref_src=twsrc%5Etfw">November 21, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

You can see it in action here: https://codepen.io/StanleyThat/pen/EaKwrPV

This question is similar to: How to change style of iframe content cross-domain?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — Xavier Pedraza
– Xavier Pedraza, Commented 6 hours ago
Owing to the fact that you (pretty much) can't add styles to the document, you can try playing with CSS transforms or clip-path to visually hide the unwanted border. — Xavier Pedraza
– Xavier Pedraza, Commented 6 hours ago

Shirley · Accepted Answer · 2025-11-22 06:41:02Z

0

You can't style inside the iframe, but you can style the wrapper and blockquote.
HTML:

<div class="tweet-wrapper">
  <blockquote class="twitter-tweet" data-media-max-width="560">
    <p>...</p>
  </blockquote>
</div>
<script async src="https://platform.twitter.com/widgets.js"></script>

CSS:

blockquote.twitter-tweet {
  border: none;
  margin: 0;
  padding: 0;
}

.tweet-wrapper {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}

.tweet-wrapper iframe {
  border: 0 !important;
  box-shadow: none !important;
}

Try this out.

answered 1 hour ago

Shirley

114 bronze badges

New contributor

Sign up to request clarification or add additional context in comments.

1 Comment

A Haworth 14 mins ago

Code-only answers can be improved by adding a description of what it is that makes this suggestion work. How does it get rid of the border that is within the iframe?

Collectives™ on Stack Overflow

How to remove a css border from a twitter embed?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related