How to give border to ngbpopover

Question

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.

Answer 1

I was found some hack for it. Hope it will help You. (add this classes into global style of ionic.)

 .my-custom-class {
    background: aliceblue;
    font-size: 125%;
    border: 2px solid black;
  }

  .my-custom-class .arrow:after,
  .my-custom-class .arrow:before {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
  }

  .my-custom-class .arrow:after {
    top: -1px;
    border-color: aliceblue transparent transparent transparent;
    border-width: 10px;
  }

  .my-custom-class .arrow:before {
    top: 0px;
    left: calc(100% - 2px);
    border-color: black transparent transparent transparent;
    border-width: 12px;
  }

And apply same class to ngb popover like :

<button type="button" class="btn btn-outline-secondary" ngbPopover="Nice class!" popoverClass="my-custom-class"> Popover with custom class

Reference from CSS triangle custom border color

Answer 2

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.