how to change ngBootstrap datepicker border-radius

Question

I want to set the border-radius of the ngBoostrap datepicker to 0.

CSS:

[_nghost-c9] {
   border-radius: 0.25rem;
}

HTML:

<ngb-datepicker _ngcontent-c7="" tabindex="0" _nghost-c9="" class="ng-untouched ng-pristine ng-valid">
</ngb-datepicker>

I don't want to change any code of ngBootstrap. Is there a method on how to override this css?

Answer 1

like below

ngb-datepicker[_nghost-c9] {
  border-radius: 0.50rem;
}

this should work

you can even add any parent class,tag etc to your selector

div [_nghost-c9]{}

or add class to your element call it like

.my-class[_nghost-c9]{}

Answer 2

try this Example Link here

add class to ngb-datepicker called c-datepicker

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next" class="c-datepicker"></ngb-datepicker>

add css

.c-datepicker{
  border-radius:0!important;
}