Very wide thin curly braces with CSS or jQuery

Question

Is there a way to get very wide but thin curly braces with CSS / jQuery?

Simply scaling the div also scales the line width, so the braces become ugly when getting too big.

<div id="braces" style="font-size:20px;">{</div>

$("#braces").css({
    "transform" : "scale(4,25)"
});

This code gives me very very large and narrow curly braces, but I would like to have very thin braces where only the "arms" became longer.

Has anyone an idea of how to achieve that?

Answer 1

I'm not good at HTML / CSS, but I did my best.

.brace {
  width: 2em;
  height: 3em;
}
.brace_part1 {
  border-left: 2px solid black;
  border-top-left-radius: 12px;
  margin-left: 2em;
}
.brace_part2 {
  border-right: 2px solid black;
  border-bottom-right-radius: 12px;
}
.brace_part3 {
  border-right: 2px solid black;
  border-top-right-radius: 12px;
}
.brace_part4 {
  border-left: 2px solid black;
  border-bottom-left-radius: 12px;
  margin-left: 2em;
}

<div class="brace brace_part1"></div>
<div class="brace brace_part2"></div>
<div class="brace brace_part3"></div>
<div class="brace brace_part4"></div>

Answer 2

The solution I used in the end is http://jsfiddle.net/q9Bcb/69/

    var height = canvas.height;
    var space  = 5;
    var radius = 7;

    var linelength = height / 2;

    context.lineWidth = 4;
    context.beginPath();
    context.moveTo(20+radius, space);
    context.arcTo(20, space, 20, space+radius, radius);

    context.lineTo(20, linelength - radius);
    context.arcTo(20, linelength, 20 - radius, linelength, radius);
    context.arcTo(20, linelength, 20, linelength + radius, radius);
    context.lineTo(20, height - space - radius);
    context.arcTo(20, height - space, 20 + radius, height - space, radius);

    context.stroke();