Safari bug with CSS rounded corner rendering - css

Question

Running Safari 5.05.
This CSS is looks fine in Chrome and Firefox, but when displayed in Safari, the border-left only spans to the beginning of the border-radius. This leaves a gap at the top/bottom.
.boxWithLeftBorder {
height:100px;
width:100px;
background: #ddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-left: 20px;
border-color:#000;
border-style:solid;}
I've included an image below to clarify.
Given the wisdom of the crowds I'm guessing this is either well known or there is an easy workaround. I've Googled to the best of my ability and would appreciate any ideas. Thanks!!

Answer 1

Using some creative CSS pseudo elements (:before or :after), you can achieve your effect and use minimal markup at the same time. Note: The red border color emphasis is mine.
HTML:
<div class="boxWithLeftBorder">Lorem Ipsum</div>
CSS:
.boxWithLeftBorder {
background: #ddd;
border: 3px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 100px;
position: relative;
width: 100px;
padding: 0;
}
.boxWithLeftBorder:before {
background-color: #c00;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
content: "";
display: block;
float: left;
height: 100%;
width: 20px;
}
Edit this Fiddle: http://jsfiddle.net/BYa9C/5/

Answer 2

Safari 5.05 and Firefox 3.6+ should support border-radius without the -webkit- and -moz- prefix.
If you have elements inside your rounded-corner elements, the will need to have completely transparent backgrounds or to have rounded corners themselves (first and last elements inside the element in discussion)

Answer 3

You'll wind up with issues attempting to do this in this fashion because of how borders are drawn -- and the vagaries across different browsers at the moment.
You can hack the functionality by adding a wrapper box:
.outer-box
{
padding:2px 2px 2px 20px;
border:none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:#000;
width:100px;
height:100px;
}
.inner-box
{
border:none;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background:#ddd;
width:100%;
height:100%;
}
html:
<div class="outer-box">
<div class="inner-box"></div>
</div>
I leave in the -moz and -webkit prefixes because There is still a significant amount of Firefox 3.5 and Safari 4 out there.
Note that the inner box has a smaller radius. This is necessary because the angles will change as you shrink the boxes.