Border on div with gradient background

[jonathanwilke]

I have a div that has gradient background and a semi-transparent border. The problem with this is that on lighter edges the looks the way it should, but on the sides where the gradient goes darker the border looks lighter then the background though it is the same rgba(0, 0, 0, 0.1) border. Honestly i have no idea how to solve this, so i hope you can help me with this.

Here’s the code:
http://codepen.io/anon/pen/BNbMGE

[bearhead]

The only solution I can think of is to define the sides of the border separately, and make the right and bottom borders have a little more opacity.

http://codepen.io/kvana/pen/QbooZp

[Author]

Posts