How do I get rid of the blue border in Modal Popup while using Custom UI?

Here is how the Modal Popup looks right now.

How do I get rid of the blue border showing up behind the modal?

Hi @anirudhmaddy,

Thanks for reaching out. I believe the blue border is added here due to accessibility reasons. It sets the modal in the focus state and it allows to navigate through your it with your keyboard.

However if you really want to remove this behaviour could you please share what component you’re using exactly for this modal experience? I believe there is a high chance that this component accepts autoFocus prop that’s set to true as default. I think that setting it’s value to false could solve your issue.

Best regards,
Paweł

2 Likes

In case you still need the answer to this. Try adding the following to your CSS

outline: none;