How do I remove the border that appears when map area is selected in Leaflet map

Question

I created a leaflet map that overlays map tiles using a GeoJson file. When I click on a area that I have overlaid a ugly black border appears as below.

I also have used leaflet tooltip to bind a tooltip to each feature area with the below code

layer.bindTooltip(this.returnTooltip(feature))

The black border appears only when I bind the tooltip. When the above code is commented out the black border doesn't appear when an area is selected.

I can't find where this border is getting added from, I just want to completely remove it.

Answer 1

This is called outline and i.e. used for highlighting things without affecting the layout or for accessibility reasons.

You can use this to remove it everywhere:

*,
*:focus,
*:hover {
    outline: none;
}