Rounded corner creates a border between consecutive elements in Internet Explorer

Question

I have 2 consecutive elements. Things look fine on Chrome but theres an issue with IE (what a surprise). There is a thing space between the elements that looks like a border but is in fact the background showing through.

This is happening in IE10 and IE9.

http://codepen.io/anon/pen/KwEVwM

Heading Bottom

 body { background: blue; } .top { background: white; border-radius: 10px; padding: 10px; border-right: 6px solid #D7D7D7; border-bottom: 6px solid #B9B9B9; box-shadow: 4px 4px 0 rgba(0,0,0,0.2); box-sizing: border-box; margin-bottom: 20px; padding-top: 15px; padding-bottom: 5px; padding-right: 25px; float: left; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; position: relative; z-index: 0; padding-bottom: 0; margin-bottom: 0; } .bottom { background: white; border-radius: 10px; padding: 10px; border-right: 6px solid #D7D7D7; border-bottom: 6px solid #B9B9B9; box-shadow: 4px 4px 0 rgba(0,0,0,0.2); box-sizing: border-box; margin-bottom: 20px; border-top-left-radius: 0; position: relative; z-index: 0; clear: both; } 

Answer 1

really interesting. in IE11 i get the same issue. Try margin-bottom: -1px on top -> works in IE11.

but i really don't know why this happens. maybe some rounding problems with the shadows, or the z-index: 0