I have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly.
Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; height: 100%; }
div { padding: 0em; margin: 0em; }
div.bodyContainer, div.header, div.footer { width: 60em; }
div.header { text-align: center; }
div.bodyContainer { text-align: center; margin: 0 auto; }
div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
div.footer { text-align: center; }
div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
div.outer { display: block; }
div.left, div.middle, div.right { display: table-cell; }
div.middle { border-top: 0.3em solid purple; border-right: 0.6em solid purple; border-left: 0.6em solid purple; }
div.bodyContainer { /*background-color: pink;*/ }
div.middle { background-color: lightblue; }
div.footer { background-color: #ddd; }
.clearfloat { clear: both; }
.menu { background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /* 3F65CC */
--></style>
</head>
<body onload="disableUpdateSubmit();">
<div class="bodyContainer">
<div class="header">
<!-- menu start -->
<div class="menu"></div>
<div class="clearfloat"></div>
<!-- menu end -->
</div>
<div class="outer">
<div class="left"><br></div>
<div class="middle"><br>middle</div>
<!-- middle end -->
<div class="right">
<!-- start of specials -->
<div class="specials">SPECIAL OFFERS</div>
<!-- end of specials -->
<br class="clearfloat">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>