I am looking for information on how to draw borders around rectangles and provide a slightly different rendering for overlapping borders. These rectangles are created by the user, so they can have different sizes and overlaps. Users specify a z-order. Here is an example:

My data is modeled using simple direct data structures. For simplicity, I expect to draw an entire border with lines (even if there is no overlap). I plan to draw rectangles and borders using SVG in the browser, but I'm just looking for a universal solution that is agnostic of the platform ..
This problem area is new to me. I do not have much experience in this area, but I will gladly take the information that I can get.