How to fix outline overlap?

HTML

<div>
<button>A</button>
<button>B</button>
<button>C</button>
</div>

<div>
<button>A</button>
<button>B</button>
<button>C</button>
</div>

CSS

div > *:not(:last-child) {
  border-right: solid 1px #CCC;
}

div > *:not(:last-child) {
  border-right: solid 1px #CCC;
}

OUTPUT

3 Replies

glutonium•2y ago

elaborate your question

Armands UiskaOP•2y ago

the outline is "cut off" by border I tried to add margin-right: 1px; it seemed to work for buttons but if I add <input type="text" /> it has the same problem this did the trick

div > *:focus {
 z-index: 1;
}

div > *:focus {
 z-index: 1;
}

but I kinda don't like it... but maybe it is the way to go...

Unknown User•2y ago

Message Not Public

Gaming

Programming

How to fix outline overlap?

Did you find this page helpful?