As Nick Caldwell already pointed out, you get funny looking overlapping corners in Safari on Mac when using RGBA borders. I’ve been playing around with it for some time and found that you can tweak the intensity of the alpha channel up or down on two sides that are parallel. (top and bottom or right and left) Example Code:
Jason Weaver
As Nick Caldwell already pointed out, you get funny looking overlapping corners in Safari on Mac when using RGBA borders. I’ve been playing around with it for some time and found that you can tweak the intensity of the alpha channel up or down on two sides that are parallel. (top and bottom or right and left) Example Code:
border: 10px solid rgba(220,220,220,.05); border-bottom: 10px solid rgba(220,220,220,.06); border-top: 10px solid rgba(220,220,220,.06);
This renders a better effect for thicker borders and needs to be tweaked a little for certain colors but overall I find it works well.