Title: Button Styles
Last modified: December 17, 2016

---

# Button Styles

 *  [seangw83](https://wordpress.org/support/users/seangw83/)
 * (@seangw83)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/button-styles-3/)
 * Is there any CSS available to make the tabs look more like buttons with rounded
   corners?

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Author [wpshopmart](https://wordpress.org/support/users/wpshopmart/)
 * (@wpshopmart)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8571275)
 * Yes,
 * Do you have any example to explain your requirement.
 * Also please share me your tab page url?
 * Thanks
 *  [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * (@alberthart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8654824)
 * 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
 *  [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * (@alberthart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8654826)
 * I left the out the page URL. Here it is:
 * [http://stackoverflow.com/questions/19363759/how-to-make-rounded-tabs-with-css](http://stackoverflow.com/questions/19363759/how-to-make-rounded-tabs-with-css)
 *  Plugin Author [wpshopmart](https://wordpress.org/support/users/wpshopmart/)
 * (@wpshopmart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8659058)
 * HI,
 * Can you please also share me your tab page url?
 * Thanks
 *  [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * (@alberthart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8660289)
 * Here is the page.
 * [http://www.renderplus.com/wp2/test-tabs/](http://www.renderplus.com/wp2/test-tabs/)
 * ![tabs](https://i0.wp.com/wiki.renderplus.com/images/2/29/Test_page.jpg)
 *  [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * (@alberthart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8660744)
 * 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 ;
 * }
 * ![tabs](https://i0.wp.com/wiki.renderplus.com/images/1/1a/Test_page2.jpg)
 *  Plugin Author [wpshopmart](https://wordpress.org/support/users/wpshopmart/)
 * (@wpshopmart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8668743)
 * 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
 *  [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * (@alberthart)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8669339)
 * That didn’t get rid of the corners on the rectangles.
 * I left it in so you can take a look:
 * [http://www.renderplus.com/wp2/purchase/?t=4](http://www.renderplus.com/wp2/purchase/?t=4)
 * Al

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Button Styles’ is closed to new replies.

 * ![](https://ps.w.org/tabs-responsive/assets/icon-256x256.png?rev=2337177)
 * [Tabs Responsive - With WooCommerce Product Tabs Extension](https://wordpress.org/plugins/tabs-responsive/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tabs-responsive/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tabs-responsive/)
 * [Active Topics](https://wordpress.org/support/plugin/tabs-responsive/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tabs-responsive/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tabs-responsive/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [AlbertHart](https://wordpress.org/support/users/alberthart/)
 * Last activity: [9 years, 3 months ago](https://wordpress.org/support/topic/button-styles-3/#post-8669339)
 * Status: not resolved