How to change the bootstrap popover arrow border color without filling it?

Question

I want to change the border-color of popover arrow.When I apply the border color,the arrow itself is filling up with the color.

I want to give only the color to the border of the arrow as for the popover body.

<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a>

$(function () {
    $('#example').popover();
});

Demo

Answer 1

you change the.popover.right .arrow. So changing the .arrow:after will change the "fill" color for the arrow, as you see I set to gray.

.popover.right .arrow {
  border-right-color: aqua;
}

Fiddle

Answer 2

.popover.right .arrow:after {
  border-right-color: white;
}
.popover.right .arrow {
    border-right-color: red;
}

updated fiddle