How do I Make rounded corners on na image that already is centered?

[BluebayStudios]

I need Help with rounding image corners.

<p style="text-align: center;"><img src="image.png" 
     width="300" 
     height="150"/>

[CoderElijah]

I assume you’re using HTML/CSS/JS? Please clarify your programming language and if possible share the link to your Repl for specific help.
Try this CSS:

img {
  border-radius: 25%;
}

[BluebayStudios]

 <p style="text-align: center;"><img src="wolfden.png" 
     width="300" 
     height="150"/>

[BluebayStudios]

@CoderElijah

img {
  border-radius: 25%;
}

Yup, css js HTML. Let me try that now.

[MattDESTROYER]

@CoderElijah

img {
  border-radius: 25%;
}

You probably want to use a standard, non-scaling unit for a border radius, like pixels (px), instead of a percentage (%).

[CoderElijah]

Probably. I tend to play around with different units until it’s the way I want it since CSS has so many units. I think 25% will make it a circle.

[MattDESTROYER]

It will depend on the dimensions of the page/parent element. The page will likely be very large in proportion and hence make it a circle. I think any value greater than half the width of the object will make it a circle.

[python660]

hmm usually I just do 100% but I think the border radius should be 50% to make a square a circle;
Here is mathematical proof (kinda i was lazy)

[BluebayStudios]

I do not know how to apply it. Im new to css

[python660]

just go into your css file and add a property border-radius: 50%
Feel free to tweak 50% to anything you want. I usually use 10-20px for border-radius.

[CoderElijah]

A separate CSS file is ideal but here’s how with your existing code:

<p style="text-align: center;"><img src="wolfden.png" style="border-radius: 25px;"/>

[python660]

just make sure you keep the width and the height properties. Happy coding!