Bezier curve in CSS?

Question

Is there a way to get this bezier effect in CSS? As you can see in the fiddle I am using canvas to add a curvey bottom section to the window control handle with this code:

ctx.beginPath();
ctx.moveTo(20,0);
ctx.bezierCurveTo(25,15,0,10,-1,35);
ctx.strokeStyle="#000"
ctx.lineWidth=4;
ctx.stroke();
ctx.lineTo(-1,0);
ctx.lineTo(300,0);
ctx.fillStyle="#222"
ctx.fill();
ctx.closePath();

But it doesn't look very good. It's blurry and doesn't line up completely. If I could use CSS then it would look crisp.

Answer 1

The closest you can come in just CSS is something hacky: http://jsfiddle.net/TylerH/DaKFb/1/ Based off of someone's work I saw a long time ago and saved for reference. It is best to use Canvas, I think, and just fiddle with it to try and smoothen the edges.

#curves div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#curves.width div {
    border-color: transparent transparent transparent black;
}

#curve5 {
    border-radius: 60px 0 0 0;
}

<div id="curves" class="width">
    <div id="curve5"></div>
</div>

Visit this page to find out how to do it in Canvas SVG: http://www.sitepoint.com/html5-svg-cubic-curves/