Button Styles

Yes,

Do you have any example to explain your requirement.

Also please share me your tab page url?

Thanks

Take a look at the tabs on this page.

We would like an example of CSS to make tabs with rounded corners, and separation like on this page

I left the out the page URL. Here it is:

https://stackoverflow.com/questions/19363759/how-to-make-rounded-tabs-with-css

HI,

Can you please also share me your tab page url?

Thanks

Here is the page.

https://www.renderplus.com/wp2/test-tabs/

I put this in the CSS for the tabs, and now I have this.

Closer – but perhaps you could suggest something to make it work better.

.wpsm_nav-tabs li{
border-radius: 12px 12px 6px 6px ;
-moz-border-radius: 12px 12px 6px 6px ;
-webkit-border-radius: 12px 12px 6px 6px ;
border: 2px solid #404040 ;

}

Also add this css code –

.wpsm_nav-tabs li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 0 2px 2px;
    border-radius: 8px 0 0 0;
    -webkit-transform: skewX(-20deg);
       -moz-transform: skewX(-20deg);
         -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
    background-color: inherit;
    z-index: -1;
}
.wpsm_nav-tabs li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 2px 2px 0;
    border-radius: 0 8px 0 0;
    -webkit-transform: skewX(20deg);
       -moz-transform: skewX(20deg);
         -o-transform: skewX(20deg);
            transform: skewX(20deg);
    background-color: inherit;
    z-index: -1;
}

and then let me know.

Thanks

That didn’t get rid of the corners on the rectangles.

I left it in so you can take a look:

https://www.renderplus.com/wp2/purchase/?t=4

Al