When you define a typical CSS border, the corners join together at a 45-degree angle:
border-width exaggerated for effect
Instead, we can use a combination of border and box-shadow to produce a square border join:
Open the Codepen to play around with the values, and set $insetBorder to false to place the bottom "border" below the left border.
Top comments (2)
Wow, looks nice. Thanks for sharing!
Wow this is cool !