Skip to content

Quick CSS Tip: Two-toned square join borders

twitter logo github logo ・1 min read  

When you define a typical CSS border, the corners join together at a 45-degree angle:

example of normal CSS border join

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.

twitter logo DISCUSS (2)
Classic DEV Post from Jun 17 '19

How to Get Smarter Without Knowing Anything

Extend your brainpower with the internet

Stephanie Eckles profile image
Web Dev (frontend/JS/React) building a design system / teaching a code video series, Nebraska farm-raised, mom of 2 girls

DEV is a next-gen coding forum.

And it's free