Chrome: Div has white line in center

Question

For some reason Chrome is rendering out one of my divs with a white line going straight through the middle. I provided an image below. It looks okay in Firefox hover.

HTML:

 <div class="corners">
<center><h2 class="featurette-heading3">What Are BnD'z Hours Of Operation?       </h2>
</center>
<ul class=""> 
<li>Monday-Thursday 6:00AM &mdash; 9:00PM </li>
 <li>Friday 6:00AM &mdash; 10:00PM</li>
 <li>Saturday 11:00AM &mdash; 10:00PM</li>
  <li>Sunday 11:00AM &mdash; 8:00PM </li>
  <br></div>

Here is my CSS:

.corners {
background: #cc0000; /* fallback */
background:
    -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
    -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
    -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -o-linear-gradient(135deg, transparent 10px, #c00 10px),
    -o-linear-gradient(225deg, transparent 10px, #c00 10px),
    -o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
    -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

.corners.round {
background:#;
background:
    -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
    -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}

.corners, .corners.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.corners {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}

Answer 1

First, your angles are wrong. You use 135deg where you should be using 315deg and you use 315deg where you should be using 135deg. You see a line because you have the backgrounds ending at exactly 50% and browsers are notorious for having issues along the edge of images, and it's likely a rounding difference.

Here is the corrected CSS:

.corners h2 { text-align:center;}
.corners {
    background: #cc0000;
    /* fallback */
    background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px);
    background: linear-gradient(45deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(315deg, transparent 10px, #c00 10px), linear-gradient(225deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(135deg, transparent 0px, transparent 10px, #c00 10px);
}

.corners, .corners.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 51% 51%;
    -webkit-background-size: 51% 51%;
    background-size: 51% 51%;
    background-repeat: no-repeat;
}
.corners {
    width: 500px;
    margin:15px auto;
    padding:13px 15px;
    color: white;
    line-height:1.5;
}

Updated HTML:

<div class="corners">
    <h2 class="featurette-heading3">What Are BnD'z Hours Of Operation?</h2>
    <ul class="">
        <li>Monday-Thursday 6:00AM &mdash; 9:00PM</li>
        <li>Friday 6:00AM &mdash; 10:00PM</li>
        <li>Saturday 11:00AM &mdash; 10:00PM</li>
        <li>Sunday 11:00AM &mdash; 8:00PM</li>
    </ul>
</div>

http://jsfiddle.net/k7UGz/9/

I've increased the background sizes so that they overlap slightly to remove issues with browsers (Chrome on Linux) not calculating out 50% precisely enough to apply full coverage.