Odd black border in Chrome

[Jugoslav]

Hello,

Is there any reason why Chrome browsers adds this odd border on focus? 

So far, I noticed that it happens with TextBox and RadGrid but possibly it happens with other controls too. 

When you inspect elements in Chrome there is no such style

 

Thank you

 

[Doncho]

Hi Jugoslav,

In general, built-in styles of the Browser are applied when there is no explicit styling introduced for a specific HTML element. 

Telerik Controls are applying own custom styling but in some cases like focus, hover, and active states of some native HTML elements the styling is delegated to the browsers. Therefore changes introduced in Chrome v83 the browser's default styling affect the appearance of some Telerik Controls as well.

The visible black border subject of this thread is a predefined outline, which can be overridden as desired.

The first two points in the  Improve Your Debugging Skills with Chrome DevTools could help to inspect the applied styles of the elements on the page.

Sample CSS you can try to overcome the issue with RadTexbox, RadGrid:

.RadGrid:focus,
.RadInput:focus,
.RadInput *:focus{
    outline:none;
}

I hope this will prove helpful!

Regards,
Doncho
Progress Telerik