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
James Walton
1,567 PointsBorder Radius
My picture ends up being an oval, not a circle. Could this have to do with the size of my picture?
James Walton
1,567 Points.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Jacob Mishkin
23,117 PointsI'm not sure why you're getting an oval. the only other thing I can think of is adding height equal to the width, but since you have it displayed block, that should cover it. try adding a height of 150px and se what happens.
1 Answer
Greg Kaleka
39,021 PointsHi James,
If your picture isn't a square to begin with, it won't turn into a circle - it will be an oval. This is expected. Rounding off a rectangle makes an oval :).
Also, note that you should really be setting the border radius to 50% rather than 100%. It doesn't have any effect over 50% (you could make it 1,000% and it would look the same), but just so you're aware, 50% is the max.
Happy coding!
James Walton
1,567 PointsThat must be what it is. My original picture is rectangular. Thanks for the input, Greg!
Greg Kaleka
39,021 PointsHappy to help!
Jacob Mishkin
23,117 PointsJacob Mishkin
23,117 Pointscan you post your code so we can see what the issue is? also what do you have the border-radius set to?