What CSS method would remove an outline of a div cross browser - html

Question

I have two divs that join together that contain an image. The way the it is layered out the image is in two half's.
This works as intended but only views correctly in chrome. In the other browsers there is an outline or some layout error which causes the document to look different.
I presumed that outline:0; and border:0; would do the trick.
This is how the image should look. This is taken form chrome. As you can see there is nothing visually wrong with this.
Internet Explore
FireFox
Safari
CSS:
.login{
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-200px;
width:300px;
height:400px;
border-radius:10px;
text-align:center;
display:table-cell;
vertical-align:central;
padding:0 0 0 0;
border:0;
border-style:none;
outline:0;
}
.login header{
height:75px;
width:100%;
margin-bottom:0;
padding:0 0 0 0;
border-style:none;
outline:0;
border:0;
}
.login header .logo{
width:150px;
height:75px;
outline:none;
margin-left:75px;
border:0;
border-style:none;
outline:0;
background:url(assests/logo_tiny.png) center 0px no-repeat;
background-color:#000;
border-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
box-shadow:5px 5px 10px #000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
}
.login form{
outline:none;
width:100%;
height:245px;
padding:0 0 0 0;
padding-top:80px;
border:0;
border-style:none;
box-shadow:5px 5px 10px #000;
background:url(assests/logo_tiny.png) center -75px no-repeat;
background-color:#000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
border-radius:10px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFF;
}
HTML:
<div class="login">
<header>
<div class="logo"></div>
</header>
<form>
</form>
</div>
Update: Fiddle

Answer 1

You made a mistake by flattening your logo.
It was 150px wide and only 75px high. Besides you've removed the border-radius at the bottom. On order to have a circle cast a circular shadow the whole div has to be square and the border-radius have to be equal.
See attached fiddle.
http://jsfiddle.net/mbh6W/2/
So the line you saw was in fact the box shadow of the circle that was flattened at the bottom.