<div>: background gradient cropped when no border

Question

Consider the following code: http://jsfiddle.net/A98vk/

The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.

The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.

Can anyone please tell me what's the problem with it? I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.

Answer 1

Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage

Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.

Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.

There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.

Answer 2

You can add overflow:auto (or hidden) to the .header div and fix the cropping.

See this demo