How to partially round corners of given block with box-shadow, and keep unrounded corners with unrounded box-shadow (webkit and gecko)?

Question

I have a div with multiple borders, and for one border I am using box-shadow. I want this div to have a few rounded corners with one square corner. However, whenever one corner has a border-radius added to it (other than 0), the other corners of box-shadow become rounded as well (with a different radius than any of the specified values for border-radius). Is there a way to set border-radius for some corners, but not all, and have the box-shadow use the same radius as the border for all corners?

This behavior is present in Chrome 19, Firefox 13, and Safari 5, but it is not present in Internet Explorer 9 or Opera 12, which both display the box-shadow as expected—with a square corner for the box-shadow when the border's corner is also square.

Code (example):

CSS

.block1 {
    padding: 18px 14px;
    margin: 5px;
    background: #fff;
    border: 1px solid red;
    -webkit-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -moz-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -webkit-border-radius: 10px 0 10px 10px;
    -moz-border-radius: 10px 0 10px 10px;
    border-radius: 10px 0 10px 10px;
}
.block2 {
    padding: 18px 14px;
    margin: 5px;
    background: #fff;
    border: 1px solid red;
    -webkit-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    -moz-box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
    box-shadow: 0 0 0 5px rgba(0, 57, 47, .32);
}
.outer {
    border: 1px solid green;
}

HTML

<p>Top-right block corner is not rounded, but box-shadow is:</p>
<div class="outer">
    <div class="block1">
        foo
    </div>
</div>

<p>Box-shadow on block without border-radius:</p>
<div class="outer">
    <div class="block2">
        bar
    </div>
</div>

Answer 1

Use an inset shadow on the outer div. Looks good in chrome.

fiddle updated: http://jsfiddle.net/G2bvw/1/

Updated: If you want a solid shadow, you don't want inset shadow on the outer div and the red border is a must, this should work for you:

http://jsfiddle.net/G2bvw/3/

The trick is to use the border as shadow and the shadow as border.