Make icons appear as circles-CodePudding

Hi guys I want to change the look of these icons to a circle version.

Here's the current code:

<span>
    <a href="/futbol" rel="noopener"><img style="border-radius: 50%" src="/wp-content/uploads/2022/04/MX-flag.webp" alt="Mexico Flag Translation" width="50"></a>
</span> <span style="color:white">SP</span> <span style="color:white">|</span>
<span>
    <a href="/" rel="noopener"><img style="border-radius: 50%" src="/wp-content/uploads/2022/04/US-flag.jpeg" alt="English Flag Translation" width="50"></a>
</span> <span style="color:white">EN</span>

I tried doing it myself but couldn't make it.

Now they appear like ovals, what should I add to the code for the images to show as circles?

CodePudding user response：

You need to the image add border-radius: 50%; using css. Like in CSS/Style tag

img {
  border-radius: 50%;
}

CodePudding user response：

Use the CSS tag border-radius: 50% for your img tag.

You can do this in html with:

<img style="border-radius: 50%" src...

Or do it in a CSS file with:

img { border-radius: 50%; }

CodePudding user response：

use css property border-radius as:

    img {
          border-radius: 50%; 
        }

or if you want inline css :

style="border-radius: 50%"