CODEWITHSUNDEEP
htmlcss
clamchoda
clamchoda

Reputation: 4961

Applying padding-top to style with border-radius breaks border-radius functionality

<img src="Image source here" width="132" height="148" style="border-radius:3px;padding-top:50px"/>

Can anyone post some clarity to as why adding padding-top, seems to cause the browser ignore the border-radius property?

You can do a quick test by removing / adding the padding from the style attribute, notice how WITH padding, the border-radius is ignored.

Is this a bug, or is there good reason behind this?

Thank you for your time.

Upvotes: 0

Views: 391

Answers (3)

Ihsahs
Ihsahs

Reputation: 902

<img src="https://www.google.com/images/srpr/logo11w.png" width="132" height="148" style="border: 3px solid red; padding-top: 50px;"/>

UPDATE: *Fiddle:* http://jsfiddle.net/Shashi0812/GJ8Bt/

Upvotes: 1

Wrostran
Wrostran

Reputation: 90

is because by adding padding top your border just go up (50px) so use margin-top. like this (i add a background-color to see it better)

<img src="Image source here" width="132" height="148" style=" background-color: #3d3d3d; border-radius:3px; margin-top:50px; "/>

I hope it helps

look at it here codepen

Upvotes: 2

Godinall
Godinall

Reputation: 2290

Look at the box model mate, you should use margin-top here instead.

Upvotes: 1

Related Questions