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 trialDaniel Bromilow
796 Points'Border-radius' not affecting profile photo?
When I alter the percentage of the border radius, my profile photo remains a square as opposed to the circular example shown in the tutorial when the radius is changed to 20%
3 Answers
Marcus Polk
1,955 PointsBe sure you're selecting the correct img element in your css file. Try just adding this to the bottom of your css:
img { border-radius: 100%; }
That should make every image become a circle. That'll let you know that it's working in your browser and from there I'd make sure that the class I selected was correct and matched the class in the html file. Good luck.
Rostislav Kavan
6,818 PointsYou might also need to add browsers' prefixes. For the older ones.
Be sure no other rules rewrite this one.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Daniel Bromilow:
The problem with your is the fact it should be border-radius: 50%
, not `border-radius: 100%; on the safe side you should add browser vender prefixes which may also be your problem if your browser if a bit old. If you decide to use browser-prefixes, make sure it is after the browser-prefixed version:
.profile-pic {
width: 88px;
height: 88px;
-webkit-border-radius: 50%;
-moz- border-radius: 50%;
border-radius: 50%;
}
To read more about the border-radius spec go here
Regarding Browser Prefixes
You can benefit from using autoprefixer
or prefix-free
to not worry about browser prefixes. You can also use Compass if you're using Sass using +border-radius(50%)
(Sass, the most efficient way to use Sass) or `@include border-radius(50%)
.profile-pic {
@include border-radius(50%);
width: 88px;
height: 88px;
}
Sreng Hong
15,083 PointsSreng Hong
15,083 Pointscan you post your code?