0

I have a 9 key number pad that I want to have rounded borders. When I set the border-radius to the style property inline for each button it works just fine

 <button id="numpadOne" class="numpad-button"
     data-bind="click: numpadButtonPressed" style="border-radius: 30px"></button>

and the css for numpad-button being

.numpad-button {
min-width: 100%;
min-height: 100%;
margin: 0px;
}

As soon as I add the border-radius property to numpad-button class and remove it from inline it doesn't work anymore. Any ideas?

M. Doe
  • 189
  • 1
  • 3
  • 15
  • 3
    Have you correctly linked the external css file to you page? – G.Hunt Aug 02 '17 at 15:32
  • 1
    Try adding `!important` after the value, before the semicolon... – Usagi Miyamoto Aug 02 '17 at 15:33
  • @G.Hunt I have yes, other css styles from this file are working properly – M. Doe Aug 02 '17 at 15:36
  • Please show the code as it is written that is causing the issue. – Robert Aug 02 '17 at 15:38
  • @UsagiMiyamoto holy cow that worked perfectly. I had no idea this was a thing... thank you – M. Doe Aug 02 '17 at 15:38
  • @M. Doe While the `!important` flag may work in this case, be wary of using `!important` every time you encounter this problem, as eventually you'll run into the same issue but the important flag won't be useful as it's already in use. To be semantic, find out where else in the CSS file the style is being overwritten and add this one below it. – G.Hunt Aug 02 '17 at 15:41
  • @G.Hunt I figured this would have some negative implications yes, I'll have to look at the css properties of the tags surrounding my button probably yes? – M. Doe Aug 02 '17 at 15:44
  • Actually I just found where the issue is probably occuring. I have a class that declares these values for all buttons in the app. I just want this style to apply to my number pad, so !important would probably be sufficient here – M. Doe Aug 02 '17 at 15:45
  • No, don't do that. As @G.Hunt already pointed out, every time you use important to "fix" a problem, you are creating a new future problem that is going to be even harder to fix. Sounds like you have a simple _specificity_ issue here (go read up on that, if it means nothing to you yet), so the solution would be to make your selector more specific. You said you had a _class_ that specifies basic buttons styles - but I don't see any other class on your button, so please be more specific, and edit your question to show all code necessary to actually reproduce the problem. (See [mcve]) – CBroe Aug 02 '17 at 19:59

1 Answers1

0

What are the implications of using "!important" in CSS?

Here is a decent list of implications when using !important, for those looking to remedy any issues similar to mine.

M. Doe
  • 189
  • 1
  • 3
  • 15