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.

ray · Accepted Answer · 2021-06-08 21:44:42Z

6

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>

edited Jun 8, 2021 at 21:44

answered Jun 8, 2021 at 21:42

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove default button border with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related