Unnecessary border shown when clicked content area on understrap theme - html

Question

I'm developing wordpress theme using Understrap, with using customstrap child theme of livecanvas. It uses Bootstrap 4.
I developed my theme, but there is unnecessary border when I clicked the content area on theme. I checked the code on browser using inspects but i could not find the code that caused this problem.
here is understrap repo: https://github.com/understrap/understrap
and my page.php
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* #package understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<div class="wrapper" id="page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<main class="site-main" id="main">
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'loop-templates/content', 'page' );
}
?>
</main><!-- #main -->
<!-- Do the right sidebar check -->
<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
</div><!-- .row -->
</div><!-- #content -->
</div><!-- #page-wrapper -->
<?php
get_footer();
Which selector that I need to use to prevent this problem?
Here is the image of this be like:
1- 1st image is Default
2- 2nd image When I clicked the content area
When I clicked the content area

Answer 1

I'm pretty sure this is outline property in CSS.
As we cannot see your code right now, for debugging I would suggest to try pasting this in your styles to check if that helps:
* {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

Answer 2

Look at the following code there tabindex is used for keyboard accessibility. :focus is triggered Where tabindex is used.
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
The div mentioned above has an id content so if you'd like to remove outline only from there use the following CSS code.
#content { outline: none !important; }.
Don't use asterisk with :focus like *:focus to solve this then that might also remove outline from some other styles.

Answer 3

When I add the code below to custom css in wordpress:
*:focus{outline: none !important;}
It works.
But I don't understand that why it does not work when I add it into style.css