Raphael canvas overrides css

I'm using Raphael to create a vector based map. The map is biggish so I'm using RaphaelZPD to allow zooming and panning while fitting the image in to a smaller frame. I've used html5 to create a div set as a table-cell with rounded corners and some inset box-shadows set in the css file. I've id'd my Raphael canvas the same as the div and while it loads nicely, shows all the graphics right, has all the animated elements working properly, stays within the boundaries etc. there's still a slight a problem. The SVG overrides the rounded corner and inset box-shadow attributes set in the css. So instead of rounded corners I get sharp corners. If I pan the map so that there is no Raphael produced graphics overlaying the corner, the rounded corner appears again. Same goes for the shadows.

So is there a way to make the js stay behind these effects? Or should I try to go around it by creating inversed rounded corners as absolute elements which stay on the top layer and just forget about the shadows?

I hope I was clear with my problem, got a good week of programming experience of any kind so bit shaky with my terminology still.

http://jsfiddle.net/cgnrh/4/ <- with practice images, also very messy

#map {
  displ开发者_如何转开发ay: table-cell;
  position: absolute;
  margin-top: 104px;
  margin-left: 350px;
  border-radius: 0 2em 2em 0;
  box-shadow: inset 3px 0 7px #777;
  width: 550px;
  height: 900px;
  background: #FFFFFF;
}

var paper = Raphael('map');

I wrapped a div around your map div:

<div id="frame">
  <div id="map">
  </div>
</div>

Then I changed position from absolute to relative on #map and added styles for the frame:

#frame {
  position: relative;
  top: 104px;
  left: 350px;
  overflow:hidden;
  border-radius: 0 2em 2em 0;
}

By applying the rounded corner to the wrapping div and hiding overflow, it creates the rounded corner on the map image. I believe you're assumption is correct that the Raphael SVG is rendering over the effects of the div on which is is painting, so you just have to constrain it with a surrounding div. Changing position from absolute to relative and using positioning on the wrapping div was necessary to get it to layout in the same place it was before. I don't think you're going to be able to achieve the inset box shadow.

http://jsfiddle.net/9w2ub/