svg css rounded corner not working

rx and ry are regular attributes rather than presentation attributes. Only presentation attributes can be styled by CSS. The various regular/presentation attributes are listed here

See also Presentation Attribute and Property from the SVG 1.1 specification.

The upcoming SVG 2 specification proposes that most presentation attributes become CSS properties. So far Chrome and Firefox have implemented this part of the draft specification. I imagine other UAs will implement this in due course.

Scripting can't be simpler, why not to use it:

 yourRect.setAttributeNS(null, "rx", "5");
 yourRect.setAttributeNS(null, "ry", "5");