How to remove default button border with CSS

Question

I have a rounded button like this.

.rock{
height:100px;
width:100px;
border-radius:100px;
border-color:yellow;
border-width:8px;
}

<button class="rock" type='button'>Button</button>

My question is, how can I remove the weird half-colored thing that shows up on the button border and changes when clicked. I just want the button border to be solid yellow.

Answer 1

Set border-style to solid. I think it's outset by default, which gives you a more beveled treatment.

.rock {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  border-color: yellow;
  border-width: 8px;
  border-style: solid;
}

<button class="rock" type='button'>Button</button>