Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Razvan Sighinas
2,018 PointsBorder-radius does not give a full circle image.Can someone please tell me why?
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="Profile-photo">
I tried with Firefox,Google Chorme,IE but nothing works.
2 Answers
Matthew Rigdon
8,223 PointsI had the same issue. When I added a 100% border-radius, my picture turned into an oval. That is because my picture is wider than it is tall. Imagine smoothing the edges of a rectangle. If you want your image to be circular, you have to make sure the height and width dimensions are the same. You could try setting them by doing the following:
css
height: 200px;
width: 200px;
This will make sure that your image is circular, however, it may cause your image to stretch and become distorted because your originally image is NOT a perfect square I presume.
Jeff Lemay
14,268 PointsIs it because your height is shorter than your width? (set the height and width to 150px instead of just a max-width. this will skew your image but at least show you the border-radius works)
Is the border-radius property even affecting the img or is it still a square/rectangle? (check your class in css matches your html)
Razvan Sighinas
2,018 PointsThe img is still a square.I tried what you told me but it still doesn't work. .profile-photo {
display: block; width: 150px; height: 150px; margin: 0 auto 30px; border-radius: 100%; }
Jeff Lemay
14,268 PointsYou must not be targeting the element properly if no border-radius is being added. Is the img inside of a div with class of .profile-photo? If so, you'd want to change the selector to ".profile-picture img".
Matthew Rigdon
8,223 PointsMatthew Rigdon
8,223 PointsApparently adding rounded edges to a non-square object will result in an elliptical: http://www.abeautifulsite.net/how-to-make-rounded-images-with-css/
To counteract this, you can drop the image to a perfect square using this website: https://croppola.com/
Once your image is a perfect square, you can then add rounded edges and you will get a circle.