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

Question

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?

Jason Anello · 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.

Welcome to the Treehouse Community

Looking to learn something new?

Nathan Begnaud

Nathan Begnaud

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

1 Answer

Jason Anello

Jason Anello