How can I round edges of an iframe with TailwindCSS?

Question

I followed this guide https://www.themes.dev/blog/easily-embed-responsive-youtube-video-with-tailwind-css/

   <div className="aspect-w-16 aspect-h-9 rounded-lg bg-red-800">
      <iframe
        src="https://www.youtube.com/embed/r9jwGansp1E"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      ></iframe>
    </div>

I can't seem to round the edges or is this not possible?

Answer 1

You need to add the class to the iframe itself:

<div className="aspect-w-16 aspect-h-9 bg-red-800">
  <iframe
    className="rounded-lg"
    src="https://www.youtube.com/embed/r9jwGansp1E"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>