This content originally appeared on DEV Community and was authored by Tibor Udvari
I had to create a layout similar to what the border-collapse property does for tables in Tailwind but for elements in a flex-wrap. My first instinct was to try borders with some negative margin wizardry, but that didn't work since there is no way of knowing which elements wrapped without Javascript.
Conceptually, I needed a line centered on the edge of a container, with half of its width on the inside and the other half extending outwards to overlap with the neighboring containers—a fancy way of saying a centered border if there were one.
As a Tailwind user, I tried the ring utility, but I could not find a way to have an outside and an inset ring simultaneously. Luckily, this is only a Tailwind limitation: there can be an arbitrary number of box-shadows on an element.
There's even a handy box-shadow editor over at MDN.
Given this knowledge, the solution was a piece of cake: combine an inset and outset box-shadow to have everything stack up nicely, and add extra spacing inside the parent container to compensate for the outset width.
<div class="flex flex-wrap m-[1px]">
<div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 1</div>
<div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 2</div>
<div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 3</div>
</div>
References
This content originally appeared on DEV Community and was authored by Tibor Udvari
Tibor Udvari | Sciencx (2025-02-20T23:21:40+00:00) Flexbox Wrap Border Collapse Effect. Retrieved from https://www.scien.cx/2025/02/20/flexbox-wrap-border-collapse-effect/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.