Quick CSS Tip: Two-toned square join borders

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.

Comments

[Vaibhav Khulbe]

Wow, looks nice. Thanks for sharing!

[Marcus Stigall]

Wow this is cool !