Border styling for button groups with two or more than three children

[therealsujitk]

If you look at the default example for button groups, you'll notice that the start and end border of the middle button is set to zero so that the vertical lines have the same width. This works great for a group of three buttons but what about for two or more than three?

This question comes from an issue I faced in flowbite-svelte (themesberg/flowbite-svelte#1360), over here we set the end border width to 1px and the start border width to 0px for all the children except the first. While this work, the component looks uneven (buggy) as you can tell from the screenshots in the issue.

One way I could think of is to make the start and the end borders 0.5px for the children other than the first and the last (for the first only right, for the last only left). This would make it a bit more symmetric, however the component will look uneven again if the border and the ring have the same color (in an input field) for example for the edge children.

I've seen libraries for other frameworks don't have a proper solution to this either, I was hoping the design team can come up with a design that solves this.

[therealsujitk]

Bootstrap seems to have solved this by setting the margin start to -1px so it overlaps with the adjacent button's border. I think this might be the best solution. ~ Source

[therealsujitk]

This is the solution we used for flowbite-svelte --> themesberg/flowbite-svelte#1366