Topic: input border style

Jens Krieg priority asked 1 year ago

Expected behavior no border style

Actual behavior The border style, which does not conform to the predetermined roundness, is visible and disappears when the input field is selected.

Resources (screenshots, code snippets etc.)

              className="searchBar bg-light"
            <MDBBtn color="dark" className="search-btn">
              <MDBIcon icon="search" />

and css part

.searchBar {
  width: 15rem;
  transition: all 0.5s ease-in;
  border-radius: 50px 0 0 50px;

  border-radius: 0 50px 50px 0;

enter image description here

enter image description here

Am I doing something wrong?

Krzysztof Wilk staff answered 1 year ago


We append the notch div to our inputs which also should be styled. You have to operate on them also. So you can do i.e.

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing {
  border-radius: 20px;

to change the right trailing notch. You should also change the middle and leading ones.

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.2.0
  • Device: hp
  • Browser: chrome / firefox
  • OS: ubuntu
  • Provided sample code: No
  • Provided link: No