Custom css overriden by default css

Hi, I am using Tabs Responsive and I would like my two Tabs menu to look like a pill shape.

I added tab_container_7826 .wpsm_nav-tabs > li > a { border-radius: 21px !important } to the Tabs Responsive custom css section, but it gets overridden by the default css, which is:

#tab_container_7826 .wpsm_nav-tabs > li > a {

margin-right: 0px !important;

line-height: 1.42857143 !important;

border: 1px solid #000000 !important;

border-radius: 0px 0px 0 0 !important;

background-color: #000000 !important;

color: #ffffff !important;

padding: 15px 18px 15px 18px !important;

text-decoration: none !important;

font-size: 14px !important;

text-align: center !important;

font-family: Open Sans !important;

}

I tried adding it to the Custom CSS section on my WordPress site, but the problem remains.

Whenever I open the “Inspect” section on Google Chrome and manually insert the border-radius for the desired <a> tag, it works perfectly fine.

How can I solve this problem?

• This topic was modified 3 years, 2 months ago by michaelhaha.