<div class="form-outline m-4">

  <input type="text" id="form1" class="form-control" />

  <label class="form-label" for="form1">Example label</label>

</div>

​

  /* unfocused borders*/

  .form-outline .form-control~.form-notch .form-notch-leading {

    border-top: .225rem solid #ffaabb;

    border-bottom: .225rem solid #ffaabb;

    border-left: .225rem solid #ffaabb;

} 

​

 .form-outline .form-control~.form-notch .form-notch-trailing {

    border-top: .225rem solid #ffaabb;

    border-right: .225rem solid #ffaabb;

    border-bottom: .225rem solid #ffaabb;

} 

​

 .form-outline .form-control~.form-notch .form-notch-middle {

    border-bottom: .225rem solid #ffaabb;

    border-top: .225rem solid #ffaabb;

} 

​

​

/* focused borders*/

  .form-outline .form-control:focus~.form-notch .form-notch-leading {

    border-top: .125rem solid #cceedd;

    border-bottom: .125rem solid #cceedd;

    border-left: .125rem solid #cceedd;

} 

​

 .form-outline .form-control:focus~.form-notch .form-notch-trailing {

    border-top: .125rem solid #cceedd;

    border-right: .125rem solid #cceedd;

    border-bottom: .125rem solid #cceedd;

} 

​

 .form-outline .form-control:focus~.form-notch .form-notch-middle {

    border-top: 0;

    border-bottom: .125rem solid #cceedd;

} 

​

​

​