Search code examples
htmlcssimagetumblr

CSS border-radius Property Not Working

I run my website on Tumblr. I just added the CSS Border-Radius property and set it to 20px for all images with a specific ID. However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are.

The CSS code looks like this:

#articleimage {
    float:left;
    padding-right: 10px;
    padding-bottom: 1px;
    width: 400px;
    border-radius:20px;
}

I've determined that the issue is caused by the padding to the right, but I require that CSS property. How can I stop this conflict?

View screenshot: https://i.sstatic.net/es0aa.png

Solution

  • try changing your padding for margin:

    #articleimage {
    float:left;
    margin-right: 10px;
    margin-bottom: 1px;
    width: 400px;
    border-radius:20px;
}