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

Could you add you html ? *for all images with a specific ID* it confused me because in this case instead of using ID you have to use class!! — The Reason, Jun 25 '15 at 15:32
AND `id` needs to be unique anyway. So _for all images with a specific ID_ makes invalid HTML. Why do you need the `padding-right`? — putvande, Jun 25 '15 at 15:37
Why do you require the padding property? Are you trying to add breathing space from other content? If so, `margin` is the better choice. — light, Jun 25 '15 at 15:49
The padding property is required to space the text out from the side of the image. — , Jun 26 '15 at 20:00

score 6 · Accepted Answer · answered Jun 25 '15 at 15:35

6

try changing your padding for margin:

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

answered Jun 25 '15 at 15:35

CoqPwner

913
1
11
24

This worked. Thanks a lot. – Jun 26 '15 at 19:56

score 1 · Answer 2 · edited May 23 '17 at 12:06

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!

CSS border-radius Property Not Working

2 Answers2