How to remove outline on circular button when clicked

Question

How do I remove the blue border around my circular button when I click it.

@RachelGallen my apologies, did not know about the accepted answer feature. — luishengjie, May 16 '17 at 06:15

Rachel Gallen · Accepted Answer · 2017-05-14T16:24:41.703

3

In this example I have changed the border-color from blue to transparent and added outline:none; on :focus (could also add not enabled)

Hope this helps

button {width:50px;
height:50px;
background-image:url("http://www.rachelgallen.com/images/purpleflowers.jpg");
background-size:70% 70%;
background-repeat:no-repeat;
background-position:center center;
border-width:3px;
border-style: solid;
border-color:#000099;
}
button:focus{
 border-color:transparent!important;
 outline:none;
}

<button>

</button>

edited May 14 '17 at 16:24

answered May 14 '17 at 16:16

Rachel Gallen

27,943
21
72
81

Is there a way to make the outline circular with CSS? – evolross Jun 27 '20 at 02:19
@evolross your question has been asked a few times before. Check out [this answer](https://stackoverflow.com/a/11426967) and the other answers given to the corresponding question. – Rachel Gallen Jun 27 '20 at 08:11

Ehsan · Answer 2 · 2017-05-14T09:15:36.767

1

Use outline Property :

selector {

 outline:none;

}

Example :

.btn {

     outline: none;
}

<button class="btn">Click Me!</button>

edited May 14 '17 at 09:15

answered May 14 '17 at 09:09

Ehsan

12,655
3
25
44

How to remove outline on circular button when clicked

2 Answers2