How to give border to ngbpopover

I work in angular and I have opened a ngbpopover. But I want to give it's border as shown in design. Please help me if anyone know that how to do it.

Currently my design is like this as below. But I want it as per above image.

Solution

This is perfect answer for my question...

    <div class="col text-option border-right-1-white" (click)="openTextColor()"
       [ngbPopover]="colorPopContent" [placement]="['bottom-left', 'top-left']"
         popoverClass="intro-text-color-popover" [autoClose]="'outside'">
    </div>

.intro-text-color-popover {
  background: #0f1934;
  border-radius: 8px;
  max-width: 400px;
  width: 400px;
  border: 2px solid #5d98e1;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
  border-bottom-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after {
  border-top-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before {
  top: -14px;
  left: -3px !important;
  border-bottom-color: #5d98e1;
  left: calc(100% - 2px);
  border-width: 11px;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
  bottom: -13px;
  left: -3px;
  border-width: 11px;
  border-top-color: #5d98e1;
}

.intro-text-color-popover {
    width: 320px;
  }

This is my complete design.