How to remove the Button Outline/Border

Summary

How to remove the Button Outline/Border

Content

Hi All, 

I am trying to remove the border from the Submit Button(please refer attached ). I have tried different CSS properties like outline: none, Border:0 etc, however I am unable to remove it.

Following is my CSS class code:

.btn-primary {
  color: #fff;
  background-color: #006ed2;
  background-image: none;
  border-color: #0061b9;
  font-size: 20px;
  line-height: 28px;
  border-radius: 25px;
  text-transform: uppercase;
  max-width: 100%;
  word-wrap: break-word;
  outline: none;
  border: 0;
}

Following is my button code:

    <div class="oj-flex-item oj-sm-12 oj-md-2">
        <oj-button id="oj-button--836340336-2" on-oj-action="[[$listeners.ojButton8363403362OjAction]]" chroming="outlined"><span class="btn-primary">Clear</span></oj-button>
    </div>

Please let me know if I am missing some steps and how I can remove the border around the button.