CODEWITHSUNDEEP
htmlcss
Syjin
Syjin

Reputation: 2810

Drawbacks using box-shadow instead of border

We can emulate simple borders with box-shadow: box-shadow inset 0 0 0 1px black. However, I was wondering if there are any drawbacks (performance, compatibility, ...) in using box-shadows instead of borders.

The reason I am asking is, that design applications don't take outside borders into account when measuring distances between elements - so most of the stuff is designed with inset borders. This is reflected in Invision (our design-development handoff tool of choice), so when using the exact values for margins/paddings this leads to differences between design and final implementation.

I found some hints online, that box-shadow had a performance impact when it was introduced years ago, but I'm not sure if that is still the case.

Upvotes: 5

Views: 4363

Answers (1)

Hussein El Motayam
Hussein El Motayam

Reputation: 620

Since one of the drawbacks that you are looking for is compatibility, box-shadow is known to be incompatible with most e-mail clients including Gmail.

So, if you ever design an e-mail that uses box-shadow, expect that CSS3 property to be stripped out of your e-mail by the email clients and the e-mail would be malformed then.

On the other hand, border is well supported everywhere, so you don't need to worry about how the e-mail would look like.

Upvotes: 2

Related Questions