I would use overlapping divs.
One with square corners.
And the Other with rounded corner (so it doesn't hide the corners of the first one).
<div id="div1" />
<div id="div2" />
#div1 {
position:absolute;
top:9px;
left:9px;
height:100px;
width:100px;
background-color:white;
border:1px solid black;
}
#div2 {
position:relative;
top:-1px;
left:-1px;
height:102px;
width:102px;
background-color:white;
border-radius: 15px;
}
http://jsfiddle.net/y3EfP/
Result:
An enhanced solution provided by @web-tiki:
http://jsfiddle.net/webtiki/y3EfP/147/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…