2 Replies Latest reply on Jun 16, 2011 12:36 PM by Karsten Wutzke

    Styling rich-dataTable with rounded corners?

    Karsten Wutzke Expert



      I've managed to add rounded corners to a few RF rendered components, but I cannot get it to work for rich:dataTable. I've tried












          -moz-border-radius: 5px;

          -webkit-border-radius: 5px;

          border-radius: 5px;



      but none of them give rounded corners. The only rule that does something at all is .rich-table





          margin: 10px 0px;

          border: 1px solid lime;

          background-color: cyan;


          -moz-border-radius: 50px;

          -webkit-border-radius: 50px;

          border-radius: 50px;


          -webkit-box-shadow: #666 4px 4px 5px;

          -moz-box-shadow: #666 4px 4px 5px;

          box-shadow: #666 4px 4px 5px;




      by showing the rounded corner in all but the top left corner (drop shadow used to show top right corner). (Note, you need Firefox 3.6+ or some newer Chrome or Safari to see this. Probably IE 9 works, too.)


      Here's a screenshot:



      Is there any secret here as to why this isn't working as expected, like the simple toggle panel below? Why aren't the table sub components reacting to the custom CSS?