Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius?
<form action="{{ route('dashboard.users.index') }}" method="get">
<div class="input-group">
<input type="text" name="search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
Inspect Element:
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
Is it necessary to customize it with my own CSS?