CSS border-radius Property Not Working

Question

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.stack.imgur.com/es0aa.png

Answer 1

try changing your padding for margin:

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

Answer 2

The problem may be due to the use of an <img> tag. The corners may be not fully rounded at the right because the image is prone to be distorted with width and the border-radius (i.e. the image may not fill the entire <img> element, therefore it seems that right border-radius is being "less rounded").

Margins or paddings do not affect, as you can see in the example below:

.cnt {
  background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
  display: block;
  float: left;
  width: 400px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
#articleimage {
  padding-right: 10px;
  padding-bottom: 1px;
}
#articleimage2 {
  margin-right: 10px;
  margin-bottom: 1px;
}
#articleimage3 {
  padding-right: 10px;
  padding-bottom: 1px;
  width: 100px;
}
#articleimageAsBG {
    height: 192px;
    background: url('https://i.stack.imgur.com/es0aa.png') no-repeat center black;
    background-size: 98%;
}

<div class="cnt">
  <img id="articleimage" src="https://i.stack.imgur.com/es0aa.png" />
  <img id="articleimage2" src="https://i.stack.imgur.com/es0aa.png" />
  <img id="articleimage3" src="https://i.stack.imgur.com/es0aa.png" />
  <div id="articleimageAsBG">
  </div>
</div>

You notice:

• #articleimage is using padding and the right border-radius are slightly smaller.
• #articleimage2 is using margin and the right border-radius are equally smaller.

• #articleimage3 has reduced width (tiny image) so you can notice the difference.

• The alternative, and solution I am suggesting to you, is to use another element (like a div) where you set that image to the background like the last one in the example (scroll down to see #articleimageAsBG), you just need to adjust its background-size property.

I also suggest that you add:

-moz-border-radius: 30px;
-webkit-border-radius: 30px;

For better browser compatibility. And maybe consider using display: inline-block instead of float. Hope it helps!