Question

When a user cliks on a div (see attached screenshots bellow) I’m setting a border with:

$div.addClass("selected-block");

In CSS I have:

div.selected-block {
   border: 2px solid #155BCE !important; 
   border-radius:3px;
}

After the border is set top and left of text are increased on 3. How is it possible to avoid this?

PS. I thought of making white border for deselected div, but it’s not a good solution as white border can intersect black lines.

Answer 1

Start the element with a 2px transparent border, and just change the bordercolor.

div {
   border: 2px solid transparent; 
   border-radius: 3px;}

div.selected-block {
   border-color: #155BCE; 
}