Make Square Image Element Round

Making a square image round is not easy unless you know what you are doing with a graphics program like PhotoShop. This CSS code will show you how to take a square image, say 300px wide by 300px high (as an example) and make it a circle.

You should not use any image that is not exactly square as it will show distorted because this CSS uses border radius to accomplish this goad which will simply not work well on anything other than square images.

You’ll want to know how to get to the advanced element options for this: