locked
IE 11 Div With "border-radius" Bug. RRS feed

  • Question

  • Hi

    I've just upgrade to Windows 8.1 with IE 11 and suddenly the web site I am working on has a CSS problem, which was not there in IE 10, or Chrome. Using the following HTML I can reproduce it:- 

    <html>
    	<head>
    		<title>IE 11 Div With "border-radius" Bug.</title>
    		<style>
    			.div1
    			{
                    background-color: #bbbfd8;
                    border-radius: 1px 0 0 0;
    			}
    			.div2
    			{
                    background-color: #bbbfd8;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>IE 11 Div With "border-radius" Bug.</h1>
    
    		<div class="div1">Div 1
    		</div>
    
    		<div class="div2">Div 2
    		</div>
    
    	</body>
    </html>

    This produces the following in IE:-

    The problem is the white line between the Div 1 and Div 2 tags. Remove the "radius: 1px 0 0 0;" and it goes away.

    I am sure lots of you have found this, but I though I would fill MSs forum with it, to make the point.

    That said, does anyone suggest a good (won't break on other browsers) fix.

    John

    Wednesday, October 23, 2013 5:39 PM

Answers

  • Hi,

    Quirks is dead...ALWAYS ADD A VALID DOCUMENT TYPE DECLARATION TO YOUR PAGES.

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>DivBorderRadius</title>
    		<style>
    			.div1
    			{
                    background-color: #bbbfd8;
                    border-radius: 1px 0 0 0;
    			}
    			.div2
    			{
                    background-color: #bbbfd8;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>IE 11 Div With "border-radius" Bug.</h1>
    
    		<div class="div1">Div 1
    		</div>
    
    		<div class="div2">Div 2
    		</div>
    
    	</body>
    </html>



    Rob^_^

    heres a screen shot of the correct markup (with a html5 dtd) that displays in Standards Mode in IE11, not IE10 Quirks Mode (viz: document.documentMode==edge but document.compatMode=='backCompat'

    Wednesday, October 23, 2013 11:21 PM

All replies

  • Hi,

    Quirks is dead...ALWAYS ADD A VALID DOCUMENT TYPE DECLARATION TO YOUR PAGES.

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>DivBorderRadius</title>
    		<style>
    			.div1
    			{
                    background-color: #bbbfd8;
                    border-radius: 1px 0 0 0;
    			}
    			.div2
    			{
                    background-color: #bbbfd8;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>IE 11 Div With "border-radius" Bug.</h1>
    
    		<div class="div1">Div 1
    		</div>
    
    		<div class="div2">Div 2
    		</div>
    
    	</body>
    </html>



    Rob^_^

    heres a screen shot of the correct markup (with a html5 dtd) that displays in Standards Mode in IE11, not IE10 Quirks Mode (viz: document.documentMode==edge but document.compatMode=='backCompat'

    Wednesday, October 23, 2013 11:21 PM
  • This is not an issue with quirks mode, I am getting the same problem with a VALID HTML5 DOCTYPE, it's definitely an issue with border-radius in IE 11. See here: http://stackoverflow.com/questions/20051783/ie-11-border-radius-weirdness-did-not-occur-in-ie-9-and-ie-10

    • Edited by jrob007 Monday, November 18, 2013 5:32 PM
    Monday, November 18, 2013 2:57 PM
  • This is 100% a bug. The reason some screenshots look ok is because the line comes and goes depending what zoom level you're on. Try following the googledrive link above (the original one, not Max's fix) then zoom in and out. You will see it disappear then reappear.

    • Edited by wkwadm Tuesday, November 19, 2013 3:37 PM
    Tuesday, November 19, 2013 3:27 PM
  • The proposed answers in this posting merely mask the problem.  What if the background of the DIV is not a solid color, but an image?  The bug still exists without a solution in this case.


    • Edited by HornLife Thursday, November 21, 2013 4:10 PM spelling
    Thursday, November 21, 2013 4:09 PM
  • @Banned User.... 395 points

    Dimitri Nickolaѕ

    Member Since

    Aug 29, 2011

    Banned User 0 points.

    Mr IECustomizer - Heaps of points.

    Yo Max... Eat More Wind.


    Rob^_^

    Friday, January 17, 2014 4:11 AM
  • I can't believe this bug still exist in IE11.
    Monday, June 16, 2014 8:56 AM
  • I can't believe this bug still exist in IE11.
    Monday, June 16, 2014 8:57 AM
  • Why?  It already has perfect answer.
    Monday, June 16, 2014 9:22 AM
  • Dude! Unless you test it out DON'T SAY IT'S A PERFECT ANSWER because it doesn't work. I still get the issue not matter what. resizing the window makes the lines appear and disappear. This also happens on DIVs and TDs. There's a BAD BORDER RADIUS BUG!

    I posted issues here:
    http://connect.microsoft.com/IE/feedback/details/808920/ie11-renders-white-lines-when-border-radius-and-gradients-are-applied-to-buttons

    Right now, I'm gonna try old school slices to see if it works in the meantime.

    • Edited by yanike Tuesday, June 17, 2014 8:17 PM
    Tuesday, June 17, 2014 8:15 PM
  • You tried the script marked Answer?
    Tuesday, June 17, 2014 9:46 PM
  • Try resizing the window width until the h1 wraps to a second line. I see a gap. Reduce the width more, and when the h1 wraps to a third line, the gap grows.

    Add enough characters to the h1 so that you can wrap it to a fourth line and the gap disappears.

    • Edited by mystifeid Wednesday, June 18, 2014 12:53 AM
    Tuesday, June 17, 2014 11:41 PM
  • The screenshot marked Answer does not show any line.

    Wednesday, June 18, 2014 12:51 AM
  • It is trivial to resurrect it.

    Look at this example then try changing the h1 font-size 1px at a time. When the font-size is divisible by three....no gap. Even when the window is resized and the h1 wraps.

    <!DOCTYPE html>
    <html>
    <head>
    <title>DivBorderRadius</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    body {font-size:16px;line-height:20px;font-family:Arial;}
    .div1 {background-color:#bbbfd8;border-radius:1px 0 0 0;}
    .div2 {background-color:#bbbfd8;}
    h1 {font-size:28px;line-height:36px;}
    </style>
    </head>
    <body>
    <h1>H1 font-size 28px..................</h1>
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    </body>
    </html>


    • Edited by mystifeid Wednesday, June 18, 2014 1:51 AM
    Wednesday, June 18, 2014 1:42 AM
  • It appears that assigning both a top and bottom margin to the h1 in the example above allows any font-size to be used. Doctype or no doctype.

    <!DOCTYPE html>
    <html>
    <head>
    <title>DivBorderRadius</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    .div1 {background-color:#bbbfd8;border-radius:1px 0 0 0;}
    .div2 {background-color:#bbbfd8;}
    h1 {font-size:28px;line-height:35px;margin:8px 0 17px;}
    </style>
    </head>
    <body>
    <h1>H1 with (any) font-size, line-height, top and bottom margin set.....................................</h1>
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    </body>
    </html>
    

    Wednesday, June 18, 2014 3:14 AM
  • But the script marked Answer has no such bug.  Look at picture that accompanies it.  It is proof.

    Wednesday, June 18, 2014 6:42 AM
  • <body>
    <br>
    <h1>

    I add one <br> between body and h1 to your script, and faulty line appears.

    Your script has bug.

     

    I have an idea.  Can you post screenshot from script marked Answer?  That will settle it.

     
    Wednesday, June 18, 2014 7:00 AM
  • I add one <br> between body and h1 to your script, and faulty line appears.

    Your script has bug.

    Yes. I removed this line

    body {font-size:16px;line-height:20px;font-family:Arial;}

    If you add it back, your extra <br/> makes no difference eg

    <!DOCTYPE html>
    <html>
    <head>
    <title>DivBorderRadius</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    body {font-size:16px;line-height:20px;font-family:Arial;}
    .div1 {background-color:#bbbfd8;border-radius:1px 0 0 0;}
    .div2 {background-color:#bbbfd8;}
    h1 {font-size:28px;line-height:35px;margin:8px 0 17px;}
    </style>
    </head>
    <body>
    <br/>
    <h1>H1 with (any) font-size, line-height, top and bottom margin set.....................................</h1>
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    </body>
    </html>
    
    Can you post screenshot from script marked Answer?

    This is screenshot (of html marked answer) with window width resized to minimum width and h1 wrapping to three lines (with gap)

    This is screenshot (of html marked answer) with h1 on one line (no gap)

    Wednesday, June 18, 2014 7:19 AM
  • Using the html marked answer, you can also try adding enough characters to the h1 such that it wraps to three lines onload. You will see a gap.

    As previously posted, notice also:

    With h1 not wrapping -> no gap

    With h1 wrapped to second line -> very fine gap

    With h1 wrapped to third line -> larger gap

    With h1 wrapped to fourth line -> no gap

    • Edited by mystifeid Wednesday, June 18, 2014 7:46 AM
    Wednesday, June 18, 2014 7:40 AM
  • I see OP also is using that same default font.  His screenshot also has your faulty line.

    It is possible your same fonts both have defect.

     

    I have an idea.  Can you change your default font to famous best Segoe UI and post screenshot of script marked Answer?  It is bottom of Internet Options button marked [Fonts].  Then Webpage fonts.

    Wednesday, June 18, 2014 7:50 AM
  • Webpage font was set to Times New Roman.

    After changing to Segoe UI, (and adding a few characters to the h1) the html marked answer produces the following

    h1 not wrapped -> medium gap
    h1 wrapped to second line -> no gap
    h1 wrapped to third line -> fine gap
    h1 wrapped to fourth line -> no gap
    h1 wrapped to fifth line -> large gap
    h1 wrapped to sixth line -> no gap

    Identical behaviour on second computer.
    Wednesday, June 18, 2014 8:24 AM
  • You say it happens also with best Segoe UI too.

    Well, then possibly problem is with your default text size.

    Try to adjust size in menu bar option.   View > Text size

     

    btw.  I added  div {font-size:12pt; line-height:17pt;}  to your final script, and your bug is still there.

    Wednesday, June 18, 2014 8:49 AM
  • With webpage font set to Times New Roman AND Text Size set to Large then gap does not appear no matter how many times the h1 is wrapped. All other text sizes cause gap to appear - sometimes only after the h1 is wrapped multiple times.

    With webpage font set to Segoe UI the gap can be made to appear no matter which text size is chosen.
    I added  div {font-size:12pt; line-height:17pt;}  to your final script, and your bug is still there.

    Please do not trouble yourself. I can find many ways to create this effect myself but have found just one way to remove it for this example.

    One way that is, besides removing the border-radius.

    And as far as I am concerned, it is not my bug.

    • Edited by mystifeid Wednesday, June 18, 2014 9:30 AM
    Wednesday, June 18, 2014 9:28 AM
  • Allow me to understand how you provoke unsightly line.

     

    • change font-size.  bug
    • change font-style. bug
    • change text size. bug
    • change window size.  bug
    • script line-height. bug

     

    Then why you are doing all these things?  Don't test those.  Not allowed.

    Just do like post marked Answer.

    That is perfect answer.

     

    btw.  What is "DocX" on right margin of picture marked Answer?

    Wednesday, June 18, 2014 9:44 AM
  • Very amusing.

    No idea how the "DocX" was created.
    Wednesday, June 18, 2014 10:05 AM
  • Thank you for detail conscious study, mystifeid.
    Wednesday, June 18, 2014 10:09 AM
  • Well, the nibbles at your perfect bait would most probably have just become angrier and angrier. While that, too, may have been amusing, it did not seem constructive, so....

    And enough with the helpful votes.

    What I want to know is how to give a negative vote like the one awarded to the post marked as answer.
    Wednesday, June 18, 2014 11:19 AM
  • John, I am seeing the same (or a similar) effect as you are in one of my projects. I made a minimal thing that reproduces the behaviour. I hope it will be of use. 

    Microsoft, why is this? 

    I have a div with a 50% radius and equal heights and widths. It has a border that is the same color as the background of the parent element. Outside of this border there's a thin outline of div background color that kinda looks like anti-aliasing.

    Why does this happen? It seems to be present in all versions of IE.

    there's also a codepen:anon/pen/LVMwxR


    <body>
        <div id="inner"></div>  
    </body>

    and CSS:

    #inner {
        border-radius: 50%;
        border: 40px solid white;
        background: red;
        width: 20rem;
        height: 20rem;
        margin: 0 auto;
    }
    
    body {
        background: white;
    }
    Thursday, August 6, 2015 7:42 AM
  • Look at this JS fiddle in IE11, doctype has nothing to do with it. https://jsfiddle.net/12839002/gn0dk2hf/21/
    Wednesday, February 15, 2017 11:49 AM