CSS Dashed and Angled borders

I've found several articles on how to angle borders, but what I'm tryi开发者_JS百科ng to do is a little different.

I have an element with dashed borders like so:

.box { border: 1px dashed #fff; }

However, I am trying to simultaneously have the corners of the .box element and its dashed border be at a 45 degree angle.

Is this possible?

You could get some pretty close-to-45 degree angles by tweaking the bezier of border-radius: http://www.css3.info/preview/rounded-border/

Is there a reason why you wouldn't want to do this with 2 background elements?

.box {
    /* this background image will stick to the top of the box */
    background: url(/* you would put a 10px high image that is the width of said box */) no-repeat left top; 
    display: block;
    padding: 10px 0 0; /* this padding element needs to match the background height */
}
    .box .inner {
        /* this will stick the background image to the bottom, and grow with the natural height of the box */
        background: url(/* you'd put a looong background image, that could stretch vertically */) no-repeat left bottom; 
        display: block;
        padding: 0 10px 10px;
    }

Your markup would look like this:

<div class="box">
    <div class="inner">
        ...Content goes here...
    </div>
</div>

I can understand if you want to do it with just the border style, but I don't know of a way to do right angles and make it work in IE, to be honsest.