HTML img tag rounding all images

Please forgive my ignorance as I'm pretty new to html coding. Is it possible to use different img tags to shape different sections? I thought changing the image class name and then calling that class would work, but both images still take the img properties.

I'm using the below code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 0%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="img_avatar.png" alt="Avatar" style="width:200px">

</body>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img1 {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="img_avatar.png" class="img1" alt="Avatar" style="width:200px">

</body>

</html>

Note: The format needs to be html for sending email in Power Automate.

Solution

Class selector should have . before it. And you should not have more than one body and head tag in your html. Try this:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .rounded { border-radius: 50%; }
   </style>
</head>
<body>
    <h2>Square Images</h2>
    <img src="img_avatar.png" alt="Avatar" style="width:200px">

    <h2>Rounded Images</h2>
    <img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px">
</body>
</html>

Assuming you are using gmail maybe style tag not allowed then use bellow code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h2>Square Images</h2>
    <img src="img_avatar.png" alt="Avatar" style="width:200px">

    <h2>Rounded Images</h2>
    <img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px;border-radius:50%;">
</body>
</html>