css - Rounded Corners Not Displaying in Safari -

i work on pc hadn't realized having problem. basically, rounded corners of container not displaying in safari, strange because believe code used compatible safari. input on appreciated.

here's container code:

.container {   clear: both;   margin: 20px auto;   width: 940px;   background: #fff;   -moz-border-radius: 10px;   -khtml-border-radius: 10px;   -webkit-border-radius: 10px;   -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);   -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);   -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);   position: relative;   z-index: 90; /* stack order: displayed under ribbon rectangle (100) */ /*   overflow-x: hidden; */   *zoom: 1; } 

and website wrapped in it:

<div class="container">     website </div> 

if have safari, can view issue here.

your problem you've got prefixed versions of border-radius, haven't got standard un-prefixed version.

you need add border-radius: 10px;

yes, safari webkit browser, might think -webkit-border-radius should work, prefixed version supposed exist while style experimental. once it's become standard, browsers supposed drop support prefixed version , support standard version.

border-radius became standard long time ago, browsers should support standard version without prefix. browsers still support prefix, drop support in version.

the same applies box-shadow, , every other css style -- if declaring prefixes, should declare un-prefixed standard version too.

hope helps.