CSS border leaving small 1px gap in IE

Question

I have a div with a textured border-image with fill enabled. This displays fine on modern browsers. However, when using an older browser without border-image support, ive created a fall-back to a rounded corner border. On IE ( 9, 10 ) I get a very thin vertical gap between the content and the right border. Sometimes the gap isnt there, but scaling my browser window horizontally makes the gap flicker on and off.

Heres a JSfiddle highlighting the problem: http://jsfiddle.net/67tG6/8/

CSS

.menu_tab {
    width: 90px;
    height:250px;
    background: rgb(230,140,130);
    border: 28px solid rgb(230,140,130);
border-image: url("http://chromafunk.com/images/menu_tab.png") 30 30 40 30 fill round;
    border-radius: 20px;
    border-top: 0px;
    background-clip: padding-box;
 }

HTML

<div class="menu_tab"></div>

An image of the gap:

enter image description here

If I remove either the border-radius or the background-clip, the problem goes away. However the background-clip needs to exist for the border-image capable browsers. So I would like to fix the problem with the radius and clip still there.

Anybody have any thoughts regards this?

score 0 · Answer 1 · edited May 23 '17 at 12:07

You could try replacing the border with padding for IE 10 and earlier by using some javascript and an additional class:

css:

.menu_tab {
width: 90px;
height:250px;
background: rgb(230,140,130);
border: 28px solid rgb(230,140,130);
border-image: url("http://chromafunk.com/images/menu_tab.png") 30 30 40 30 fill round;
border-radius: 20px;
border-top: 0px;
background-clip: padding-box;
}

.menu_tab_ie{
    padding:28px;
    padding-top:0px;
    border:none;
}

How can you detect the version of a browser?

navigator.bwsr= (function(){
var ua= navigator.userAgent, tem, 
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
    tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
    tem= ua.match(/\bOPR\/(\d+)/)
    if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');

})();

--That will return a string, such as 'Chrome 35' or 'IE 11'.

This will check for 'IE' and versions-of earlier than 11 to add the class that will apply padding and remove the border:

var x = navigator.bwsr;

if(x.indexOf('IE')>-1){
  var xNum = x.split(' ');
  var x2=Number(xNum[1]);
  if(x2<11){
    $('.menu_tab').addClass('menu_tab_ie');
  }
  else {console.log('border-image should display');}
}
else {console.log('border-image should display');}

Here is your jsfiddle with these edits:

http://jsfiddle.net/67tG6/18/

Thanks Chris. That worked a charm. Not sure *why* it worked though! I had no idea that having border-radius defined would still display the border even if border:none is present. Thats a good thing to know. Still, im curious as to why I had the problem in the first place. As far as im aware, rounded corner borders are pretty standard stuff. Ive used them before and not noticed the gap on IE9/10. Yet in this example I get the gap. If you have any insight as to why the gap is appearing, I would appreciate it. — Michae Pavlos Michael, Jun 30 '14 at 11:46

CSS border leaving small 1px gap in IE

1 Answers1