Though its an old thread, thought this might help someone new to this:
I have used the plugin http://www.curvycorners.net
I was trying to apply the corners to the rich panel id directly (myBox), but after a while i found that the generated div's ids are not exactly the same (myBoxContentDiv, myBoxShadowDiv).
<script type="text/JavaScript" src="js/curvycorners.js"></script> <script type="text/JavaScript"> function round() { var settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true }; //to round the modal panel curvyCorners(settings, '#myBoxContentDiv'); //to round the shadow around the modal panel curvyCorners(settings, '#myBoxShadowDiv'); } </script> <body> <rich:modalPanel id="myBox" onshow="round()" width="350" height="100"> <h:outputText value="Demo - rounded edge modal panel"></h:outputText> </rich:modalPanel> <h:form> <h:outputLink value="#" id="link"> Show Modal Panel <rich:componentControl for="myBox" attachTo="link" operation="show" event="onclick"/> </h:outputLink> </h:form> </body>