Unable to get border-radius working in my ASP.NET ZERO MVC app using Chrome

Question

I have all other parts of the CSS working fine but no border radius. Here is one CSS snippet:

.topGreenButton {
border: 2px solid #2DCC70;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #2DCC70;
color: white;
padding: 10px 30px 10px 30px;
margin-right: 20px;

}

I am calling it like this:

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">

            <table class="topButtonTable">
                <tr>
                    <td>
                        <input type="button" value="Schedule Party" class="topGreenButton" />
                    </td>
                    <td>
                        <input type="button" value="Open Virtual Party" class="topGreenButton" >
                    </td>
                </tr>
            </table>
        </div>

Like I mentioned all other CSS is working correctly in the whole View. Even in these calls, the color, padding, font color, and margin are working correctly. I have tried using border-radius with other things besides these buttons with the same result of not working. I have used border-radius successfully in many web sites and apps. This CSS recently worked perfectly when used in a web forms app. I can't see any obvious reason why it doesn't work. I am also using VS 2017 if that makes any difference. Hopefully it is just a tired brain :) Thanks for your help!

Answer 1

The code snippet provided seems to work just fine. Please see further below. As you seem to be using bootstrap, it may be that some other css is overriding your style property. Try setting the !important declaration on your border-radius attribute, as such:

.topGreenButton {
  border: 2px solid #2DCC70;
  border-radius: 20px !important;
  -moz-border-radius: 20px !important;
  -webkit-border-radius: 20px !important;
  background-color: #2DCC70;
  color: white;
  padding: 10px 30px 10px 30px;
  margin-right: 20px;
}

Here is the full working snippet:

.topGreenButton {
  border: 2px solid #2DCC70;
  border-radius: 20px !important;
  -moz-border-radius: 20px !important;
  -webkit-border-radius: 20px !important;
  background-color: #2DCC70;
  color: white;
  padding: 10px 30px 10px 30px;
  margin-right: 20px;
}

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">

  <table class="topButtonTable">
    <tr>
      <td>
        <input type="button" value="Schedule Party" class="topGreenButton" />
      </td>
      <td>
        <input type="button" value="Open Virtual Party" class="topGreenButton">
      </td>
    </tr>
  </table>
</div>