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


Nathan Begnaud
Nathan Begnaud
8,221 Points

Why Isn't The Border-Radius Working For My Image?

My code;

body { margin: 0; padding:0; font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: url('./images/mog/mog.jpg') center top no-repeat #000; background-size: 900px; border-radius: 25px; }

For some reason it just won't change the border-radius, is there a reason why?

1 Answer

Hi Nathan,

Through my own testing it doesn't seem to work on the body element. The body element does not seem to clip background images to the border edge the way it would work with other elements that are children of the body. I don't have an explanation for this unfortunately.

If you applied that css to a div for example then it should work out. I used a paragraph in codepen and that worked out.

This is of course assuming your background image is reaching the corners of your element. You have it centered in the horizontal direction and sized at 900px so if the element that it is applied to is wider than 900px then you wouldn't see rounded corners on the image because it's not reaching the rounded corners of the element.

Keep in mind that you're not rounding the corners of the image here but rather rounding the corners of the element. The background image appears to have rounded corners because background images are clipped to an elements border edge.

It might help to explain what you are trying to achieve here so you can get a solution to your problem.