How do I create Rounded Tabs?

Support
#1

Hey I want to create rounded tabs for my website instead of them just being rectangular with sharp edges. I want it to be rounded more like a file folder. What code do I use? If you need my CSS code for my site or anything, I can include it in a private message.
Thanks!

#2

Hi there,

Please kindly add the CSS code below to X > Launch > Options > CSS:

.home .x-nav-tabs {
    border-radius: 10px 10px 0 0;
}

.home .x-nav-tabs>li {
    border-radius: 10px;
    overflow: hidden;
}

Kindly play with 10px for the border radius option to find the one which fits the best with your design. I used the .home class at the beginning of the code to restrict this for only the homepage of your website. If you want to have this for other pages either please kindly remove that section of the code.

Hope it helps.

#3

Great! Thanks so much! That worked. :slight_smile:

#4

Glad that we could be of a help :slight_smile: