I am trying to enhance the visibility of the drop-down caret, but currently it is not showing up as desired. My goal is to give both the <select> and <button> elements a circular radius similar to what is shown in the image.
.top-select{
width: 70%;
padding-left: 10px;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.find-btn{
border: 1px solid;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.margin-appen{
margin-left: -43px !important;
}
.btn-tutor:focus{
box-shadow: none;
outline: none;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
<div class="input-group mb-3">
<select class="select top-select" id="select02" >
<option selected>What do you want to learn</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append margin-appen">
<label class="input-group-text find-btn" for="select02">
<button class="btn btn-tutor">Find tutor</button>
</label>
</div>
</div>
</div>
</body>
</html>