border-radius is only rounding one corner-CodePudding

I am creating a little webpage for a school project and I am trying to round the corners of an image, but when I applyborder-radius to the image style, it only rounds one corner. I have tried resizing the image, I tried to specify that I wanted all four corners to be rounded (ex: 30px 30px 30px 30px;) but nothing seems to be working. Here is my code(no javascript yet):

`<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" 
crossorigin>
<link href="https://fonts.googleapis.com/css2? 
family=Comfortaa&display=swap" 
rel="stylesheet">
<html>

<title>
The great barrier reef
</title>

<head>
<link rel="shortcut icon" type="icon" 
href="C:\Users\Jerome\Downloads\barrier-reef.jpg">
</head>

<body>

<h1 style="font-size: 77px; 
position: relative; top:20; left:200px;">The Great Barrier Reef! 
</h1>
<h2 style="position: relative; top:100px; left:300px; font-size: 
35px;">
The seventh natural wonder of the world!
</h2>
<h3 style="position: relative; top:150; left:100px; font-size: 
25px;">
<dd>With over three-thousand individual reef systems and coral 
cays, this takes the 
cake<br><br>
<dd>as the largest coral reef on the planet. The Great Barrier 
Reef stretches across<br> 
<br>
<dd>hundreds of tropical Australian islands, and is home to 
almost ten-thousand forms
<p>of sea life! <img style="object-position: -200px -100px;" 
id="wlimage"
<!--this is the image giving me problems-->   src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock- 
424782349.jpg">
<a
href="https://cdn.britannica.com/24/19824-004-4BF0C660/Great- 
Barrier-Reef-coast- 
Australia-World-Heritage-1981.jpg">
<button style="position:relative; top:-1300px; left:340px; width: 
400; height: 50;">Show
Map</button>
</a>
<p>The Great Barrier Reef contributes more than $6.4 billion per 
year to the Australian
<p>economy and around 64,000 full-time jobs. It is about 12740 
kilometers(7916 miles)
<p>away from America.
<p style="font-size: 70px; position: relative; top:0px; 
left:350px;">SCIENCE!
<p>A barrier reef is formed when fringing reefs slowly combine 
with each other and
<p>form a borderline along the coast. Their calcium carbonate 
structures attract
<p>more polyps(invertebrates that can be no bigger than a pinhead 
to up to a foot in 
diameter)
<p>and the spaces are filled up.
<p>Barrier reefs are characterized by a reef that is separated 
from the main
<p>coast by a deep channel or lagoon.
<p>Scientists think that The Great Barrier Reef formed on a 
coastal plain that
<p>was flooded during rapid sea-level rise from 20,000 - 6000 
years ago.
</h3>
</body>
<style>
body {
font-family: 'Comfortaa', cursive;
overflow-x: hidden;
color: white;
background-color: grey
}

a {
font-family: 'Comfortaa', cursive;
overflow-x: hidden;
}

#wlimage {
border-radius: 30px;
width: 50%;
height: 50%;
}
</style>

</html>`

CodePudding user response：

The problem is that your object-position style shifts the image within the img frame. The frame is rounded, but you're seeing the (square) edge of the picture itself.

I've added a red border so you can see where the boundary of the <img> element is vs. where the edge of the picture is placed within it.

#wlimage {
  border-radius: 30px;
  border: 4px solid red; 
}

<img style="object-position: -200px -100px;" 
  id="wlimage"
  src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock-424782349.jpg">

CodePudding user response：

I fixed it by changing object-position to position.