Topic: Update border radius on mdb-form-control

stokkup2313 priority asked 1 month ago

Expected behavior Update the styling like border radius for a input, select, calendar input or anything thats within an mdb-form-control

Actual behavior current if i add css to the mdb-form-control to update the border-radius: 2px nothing happens. it still shows the rounded radius. I was able to get the input to work by adding a class to the input and changing it but I cannot get it to work for the mdb-select and mdbInput for calendar

Resources (screenshots, code snippets etc.) HTML Calendar

<mdb-form-control class="audit-log-bg"> <input mdbInput [mdbDatepicker]="toDatepicker" type="text" class="form-control form-input" id="toDatepicker" placeholder="Select end date" formControlName="endDate" /> <mdb-datepicker-toggle [mdbDatepicker]="toDatepicker"></mdb-datepicker-toggle> <mdb-datepicker [format]="'mm/dd/yyyy'" [inline]="true" #toDatepicker (dateChanged)="onDatechanged('end_date')"></mdb-datepicker> </mdb-form-control>

HTML Select

<mdb-form-control class="audit-log-bg"> <mdb-select formControlName="type" (selected)="updateFilter('action_type')" class="form-input"> <mdb-option *ngFor="let option of actionOptions" [value]="option.value">{{option.label}}</mdb-option> </mdb-select> </mdb-form-control>


.form-input { border-radius: 2px!important }

Arkadiusz Idzikowski staff answered 1 month ago

The styling in this case is a bit more complicated, we user other HTML elements to create the outline input. Here is an example rule that should override the border-radius correctly:

.form-outline .form-control ~ .form-notch,
.select ~ .form-notch {
  .form-notch-leading {
    border-radius: 2px 0 0 2px;
  .form-notch-trailing {
    border-radius: 0 2px 2px 0;

You can also override a variable responsible for this value before importing mdb.scss:

$form-notch-leading-border-radius: 2px;

@import '../../mdb-angular-ui-kit/assets/scss/mdb.scss';

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: Yes
  • Provided link: No