Border-radius and padding not playing nice

Question

I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.

CSS:

div.wrap img {
    -moz-border-radius: 50px;
         border-radius: 50px;
}
img.pic {
    padding: 15px 25px 35px 45px;
}

HTML:

<div class="wrap">
    <img class="pic" src="http://i.imgur.com/UAef0.jpg"
         width="300" height="300" />
</div>

If I remove the padding, poof, pretty corners. If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:

img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }

Any help or insight would be appreciated.

jsFiddle: http://jsfiddle.net/NwfW6/

Edited for a solution:

This was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was margin not padding. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.

score 35 · Accepted Answer · answered Feb 23 '12 at 08:54

35

Your border radius will be outside of the padding, try setting margins instead which will space outside of the border.

answered Feb 23 '12 at 08:54

GGJ

634
4
8

score 9 · Answer 2 · answered Feb 23 '12 at 08:49

9

Set the padding on "wrap" not on the image (setting paddings on images does not make much sense :)), that should fix your problem.

answered Feb 23 '12 at 08:49

Jan Hančič

53,269
16
95
99

Sorta would work, but the "wrap" element wasn't just around the "pic" element, maybe I worded it funny. Anyways putting an actual wrap around the pic seems to work, but is not quite practical in my case. thanx though. – Curtis Cook Feb 23 '12 at 09:05

score 4 · Answer 3 · answered Jul 31 '14 at 03:13

This is a byproduct of applying both padding and a border-radius to the same element in some browsers (mostly IE and safari). The border-radius changes the curvature of the border component of the box model, which surrounds the padding component.

In addition to the other answers, another interesting thing that seems to fix the issue is adding a border line. If you don't want to see the border, you could use border: 1px solid transparent, like this:

.invisible-border {
    border: 1px solid transparent;
}

Demo in jsFiddle

screenshot

score 1 · Answer 4 · answered May 05 '19 at 07:27

1

Had the same problem with a span instead of an img. Not exactly the same scenario since both tags have different display values (see this SO thread).

In my case, setting display:inline-block to the span fixed everything.

answered May 05 '19 at 07:27

Mario Vázquez

717
10
9

score 0 · Answer 5 · answered Jul 28 '20 at 07:25

Late but somehow found the solution for it. you cannot make a circle using it but you can make use of it by making a slight radius below is an example of my solution.

I need 10px padding and 5px radius for my image, added together border-radius:15px worked fine for me

I Hope the explanation was a bit better.

Border-radius and padding not playing nice

5 Answers5

Demo in jsFiddle

Linked

Related