iframeの角を丸くしたい

解決したいこと

以下のサイトが動作していない模様だが、これが動作すること。
https://hubblespacetelescope.blogspot.com/2014/02/googlemap.html

Twitter、Facebookの埋め込みをJavaScriptから書き出したHTMLを完全にレスポンシブ対応するために、iframeからそのHTMLを取り込むが、そのiframeをborder-radiusで丸くできない

例）
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。

発生している問題・エラー

丸くなってない

該当するソースコード

<iframe loading="lazy" style="border-radius: 20px;" src="test.html"></iframe>
<iframe style="border-radius: 20px;" src="test.html"></iframe>

自分で試したこと

ためしにborder-radius属性を指定しても何もおこらない。

上記サイト自体正しく動作していない模様

現在インストールされているブラウザすべてで試して、

しばらくアップデートしてないAndroidのChromeのみ動作した。

それ以外すべてのブラウザで全く動作しない

その他、img やCSSで作成した背景等はすべて丸くできています。