Change arrow color of bootstrap popover

It is better to make a modification to your local css, which is above the reference to bootstrap.

.popover-header{
  /// tus cambios en la cabecera del popover
 }

.popover-body{
  /// tus cambios en el cuerpo del popover
 }

 popover > .arrow{
  /// tus en la flecha del popover
 }

Use this CSS by changing the color of the right edge of the element Pseudo :

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

Look at a Demo to see how it works.

Another small example:

Using a popover standard in Bootstrap 3:

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Este es el mensaje">
  Popover on right
</button>

You can add the following css to your custom rules:

.popover {
  background-color: red; /*sustituye 'rojo' con tu color de elección*/
  border-color: red;
}
.popover.right>.arrow:after {
  border-right-color: red;
}
.popover-content {
  background-color: red;
}