Raphael-JS: Rect with one round corner

Question

paper.rect(0, 0, settings.width, settings.height, settings.radius);

Creates a nice rectangle with rounded corners. Is it possible to create a rectangle with just one round corner?

Answer 1

The rounded corners feature maps directly on to the underlying SVG rx and ry attributes, they apply to whole rectangles and so there's no possibility of just setting it on a single corner.

This blog post discusses an approach in SVG of basically covering up the corners you don't want rounded. Although his examples appear to be offline now, the approach should be fairly easy to reverse engineer into SVG.

An alternative approach would be to use a path instead of a rectangle object and draw the whole outline yourself. The syntax is a little obscure but is easy enough once you understand what's going on. Try Jakob Jenkov's SVG Path tutorial for an introduction.