Is there a tool for geometric shapes?

Basically, you have to draw the bitmap in RAM to create the image, then either save it as a GIF file, or send it directly to the browser indicating that you are sending the GIF file. You will need to do the same kind of tiling and positioning of individual elements that web designers do in Photoshop, except that your code will do the job.

For one possible library see libgd here , where you probably use line()

for drawing lines and arc()

for drawing corners. Of course, to get a shaded line, you need to draw multiple lines, compensating for a bit and changing color each time.

To see how web designers do it, check out this page . Take a look at the list of corner images that are used. Before coding, it always helps to understand alternative ways of doing it. You might prefer using CSS instead , which is probably easier to code.

I don't recommend using any canvas because most browsers don't support it, and for the same reason I don't think SVG is a good way to do this for general purpose sites where you just dress the look of the content.