ng-bootstrap 模态边界半径

Question

What is the best way to customize the border-radius of the NgBoostrap modal?

 <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title" id="modal-basic-title">Test</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Hello, World!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button> </div> </ng-template>

Answer 1

You just need to add border-radius to modal-content class:

.modal-content{
    border-radius: 50px;
}

Answer 2

I went to my component's typescript and put this:

this.modalService.open(content, {centered: true, windowClass: 'modal-rounded', size: 'lg'});

Soon after I went to my main scss (styles.scss) and put this code there:

.modal-rounded {
    .modal-content {
      border-radius: 20px !important;
    }
  }