How can I create this irregularly-shaped border with pure CSS (no images)?

I am trying to avoid using a background image (or any image-based solution) to effectively create this:

Note: the red arrow is just pointing at the border in question. The arrow should not be included in your answer.

How can I create this irregularly-shaped border with pure CSS (no images)? If images are unavoidable, the most concise and readable answer will get upvoted and accepted.

Answer

You could use CSS (keeping in mind this won't work with older versions of IE).

For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle.

HTML:

And the CSS:

#triangle-topright {

    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;

    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}


.align div {
    float: left;
}

You can see a variety of CSS shapes here. Most if not all require more than one div, so the challenge would be applying a darker border.