0

I need a precise box-shadow for a div, and since Chrome and Firefox render it differently:

enter image description here

I've been trying to use browser-specific prefixes -moz- and -webkit- to tune values a bit. But no luck: -moz- is for old versions of FF (up to 35), Chrome doesn't take the -webkit- prefix either, they both render the now standard box-shadow property. More interestingly it that if I keep only -moz- and -webkit- prefixes then FF uses the -webkit-!

enter image description here

What can I do to adjust values separately for each browser?

The aim is to have a shadowed bottom border, but to avoid shadows from left and right sides of div

Here is Codepen.

Martin
  • 337
  • 2
  • 17
  • 1
    Have you seen these? https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css and https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only/25496712 – Turnip Mar 16 '18 at 15:31
  • why not shove the bottom shadow on an after psuedo element positioned to the bottom of the main element or use a bottom only configuration: https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only – Pete Mar 16 '18 at 15:33
  • @Turnip wow thanks man, blazing fast! This is it – Martin Mar 16 '18 at 15:34
  • @Pete this may be a solution also but since ff/chrome render box-shadow differently - it needs to be adjusted anyway – Martin Mar 16 '18 at 15:37
  • Seems to render these 2 in exactly the same way: https://codepen.io/anon/pen/QmKbzK - bottom only border in both ff and chrome (and ie and edge) – Pete Mar 16 '18 at 15:39
  • @Pete sadly it's different in ff/chrome on my mac – Martin Mar 16 '18 at 20:17

0 Answers0