Rounded tab buttons

Design help General
1

Hi there,
I’ve created tabs but I want to style them so that the far left and right are rounded. I can’t seem to figure out how to create custom classes in this specific instance where I need the inactive left button to have rounded corners on the top and bottom left and the opposite when the right button is inactive. The same would be true for the selected/active tab.

You can check out what’s happening here by clicking on Monthly https://webflow.com/design/mx-deposit

Thanks,
Kyle

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@kylehaapala - Please share your Read-Only link. It is easier to get help that way.

3

Here it is. Didn’t know this was possible :slight_smile:

https://preview.webflow.com/preview/mx-deposit?utm_source=mx-deposit&preview=df46ee00b0ed0c4cc44aec0624f1de54

4

You need to select the ‘current’ state of the tab. Here’s a video on how to style the different states of a tab Tabs | Webflow University
Here’s an easy way to acces the ‘current’ state change current state

5

Thanks @sarahfrison but this doesn’t work. It just reverses the problem. If you do what you did and then click on Annual again, the issue is reversed. There needs to be two current states, one for the left and right buttons and same for regular states, just not sure how to do achieve that.

6

@kylehaapala - is this what you want it to look like when you switch tabs?

image

7

If you want the pill look, just add a left and right combo class, set the radius on left then right. Current would be for color.

8

Got it! Thank you very much :slight_smile: