<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class='col pt-4'> <form id="mhk-search" class="form-inline my-2 my-lg-0 "> <input class="form-control mr-sm-2" type="search" placeholder="عبارت مورد نظر را وارد کنید" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">جستجو</button> </form> </div> </div> </div>

#mhk-search{ direction:rtl; } #mhk-search button{ background: #027fff; border:1px solid #027fff; color: #ffffff; -webkit-border-top-left-radius: 100px; -webkit-border-bottom-left-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomleft: 100px; border-top-left-radius: 100px; border-bottom-left-radius: 100px; } #mhk-search input{ -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; }