paper ripple and select bar don't respect border-radius

[ebidel]

Setting <paper-tabs style="border-radius:30px;> gives me this:

But the ripple and select bar overflow the border-radius clipping:

[marcoms]

Still present unfortunately in the demo page: http://webmup.com/3rr9S/vid.webm...

You can also see in the clip odd clipping behaviour for the tab select bar after the ripple has faded out :/

[marcoms]

Not specific to paper-tabs - opened an issue with paper-ripple: https://github.com/Polymer/paper-ripple/issues/28

[anshuman91]

This can achieve by css, see code below,

<dom-module id="app-index">
    <style is="custom-style">
        :root{
            --my-custom-color: #ffb6c1;
            --paper-tab-ink: var(--my-custom-color);
        }
        paper-tabs{
            {
                --paper-tabs:{
                    background-color: pink;
                    border-radius: 100px;
                    color: white;
                }
            };
            {
                --my-ripple-color: pink;
                --paper-tab-ink: var(--my-ripple-color);
            }
        }

        paper-tab.iron-selected {
            color: pink;
            background-color: white;
            border-radius: 100px;
        }
        paper-tab{
            height: 94% !important;
            top: 2px;
            left: 2px;
            margin-right: 4px;
        }
    </style>
    <template>
        <app-location route="{{route}}" url-space-regex="/polymer-test/demo/.*"></app-location>
        <app-route route="{{route}}" pattern="/polymer-test/demo/:tabName" data="{{data}}" tail="{{subroute}}" active="{{known}}">
        </app-route>
        <paper-tabs selected='{{data.tabName}}' attr-for-selected='key' no-bar>
            <paper-tab key='foo' route="{{subroute}}">Foo</paper-tab>
            <paper-tab key='bar' route="{{subroute}}">Bar</paper-tab>
            <paper-tab key='baz' route="{{subroute}}">Baz!</paper-tab>
        </paper-tabs>

        <neon-animated-pages selected='[[data.tabName]]'
        attr-for-selected='key'
        entry-animation='slide-from-left-animation'
        exit-animation='fade-out-animation'>
        <neon-animatable key='foo'><my-test></my-test></neon-animatable>
        <neon-animatable key='bar'>Bar Page Goes Here</neon-animatable>
        <neon-animatable key='baz'>Baz Page, the Best One of the Three</neon-animatable>
    </neon-animated-pages>
</template>
<script>
    Polymer({
        is: "app-index",
        observers: [
          '_routeChanged(route.*)',
          '_viewChanged(data.tabName)'
        ],
        _routeChanged: function(changeRecord) {
          if (changeRecord.path === 'path') {
            console.log('Path changed!');
          }
        },
        message: function(fav) {
            if (fav) {
                return "You really like me!";
            } else {
                return "Do you like me?";
            }
        },
        _viewChanged: function(data){
            console.log(data);
        },
        ready: function(){

               }
});
</script>
</dom-module>