how can i make my pictures circular?

I found this code that might help: https://bavotasan.com/2011/circular-images-with-css3/

It should work if you put the html in your widget and the CSS in your style.css or your custom.css file. Good luck!

Another method: CSS Masking

Arrgggh, this is not working! Im not sure what I am doing wrong, ive tried various css codes and looked at masking but doesn’t seem to make one iota of difference. Any help is much appreciated. It is my avatar in my sidebar that I want to make round or circular.

Please help out a woman going nuts ?? :S

Have you considered uploading a circular avatar image in the first place?

Do you mean the photo in the sidebar under the heading Hi ?? It became circular when I added:

border-radius: 75px;

You should probably include separate rules for older browsers.

(By the way, I didn’t actually hack your site. I used the DOM Inspector extension in Firefox to test the CSS on your home page.)

Esmi,i didn’t want to do it this way which was why I come on her for support.

Rod that is exactly the picture I’m talking about, can you explain what you mean by the above.

Thank you so much
??

I’m guessing a little, but it looks like your site’s theme is a child theme based on Simple Catch. In that case you can go to the admin screen Appearance — Editor and add CSS to the file style.css. (You might have a different way to add CSS, and that’s up to you.)

I suggest something like the following to target the specific image without affecting other images. Modern browsers understand border-radius, some older browsers understand the other two rules, and even older browsers will ignore all three rules and display a square image.

.widget_sp_image-image-link img[width=150] {
  border-radius: 75px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
  }

I give up! But thank you very much for all your help:)