Primary buttons have white inside border

[srirambv]

Description

Primary buttons have white inside border

Steps to Reproduce

1. Clean install 0.21.654
2. Go to settings
3. See primary buttons, has inside border. hidden when hover over

Actual result:

Expected result:
Should not contain inside border

Reproduces how often:
100%

Brave Version

about:brave info:

Brave	0.21.654
V8	6.5.254.26
rev	bc6272c
Muon	5.1.3
OS Release	10.0.16299
Update Channel	Beta
OS Architecture	x64
OS Platform	Microsoft Windows
Node.js	7.9.0
Brave Sync	v1.4.2
libchromiumcontent	65.0.3325.88

Reproducible on current live release:
No

Additional Information

cc: @cezaraugusto @petemill @bradleyrichter

[bsclifton]

@ltilve has looked into this- still needs more investigation:

I have been looking a bit into the round-corner glitch
the transparent left and right borders are not showing the color behind as before
but had not yet figured out a cause for that

I have confirmed that issue is not resolved when at 100% DPI (ex: this does not appear to be related to #13349)

[bsclifton]

Problem appears to be the use of borders when we are using linear-gradient as the background inside the button

There are transparent borders on LEFT and RIGHT and colored borders on TOP and BOTTOM. Where these meet, there is a 90 degree angle. The part owned by the transparent border is filling in with WHITE instead of being transparent.

I've captured a JSBIN here which demonstrates the issue (with a bigger sized button):
http://jsbin.com/yisikex/1/edit?html,css,output

Example output using Chromium 64.0.3282.140:

Example output using Chromium 65.0.3325.146 (looks same in Chrome):

[bsclifton]

Worked-around this issue with commit 90b5bb8