title: Cross-browser 1px tooltip arrow borders with CSS?
body: <p>I'm trying to get a 1px green border on my tooltip divs &amp; their :before &amp; :after arrows, based on <a href="http://codepen.io/Paulie-D/pen/GkiyH" rel="nofollow">Paulie-D's tooltips with a 2px border.</a></p>
  
  <p>I can get them working in one browser at a time: if they work in Chrome, they're 1px off in Firefox. If they work in Firefox, they're 1px off in Safari. If they work in Safari, they're 1px off in Chrome. Etc. Haven't even tested with IE yet.</p>
  
  <p><a href="http://codepen.io/anon/pen/Hteyq" rel="nofollow">Here's my attempt, in Codepen</a>.</p>
  
  <p>Can anyone help? Is it possible to get a consistent cross-browser result for these, or am I better off just giving up and using background images?</p>