cssは丸みを帯びており、背景色は

Question

です。

私はあなたがカーブにコーナーをボーダー半径を使用する必要があります

おかげ

Answer 1

は、あなたが、少なくとも自分のためにこれをコーディングしようとしていることが予想され、この参考になっ

.panel-default * { 
 
    background: #25A9DF !important; 
 
    color: #fff !important; 
 
} 
 
::-webkit-input-placeholder { 
 
    color: #fff!important; 
 
} 
 
:-moz-placeholder { 
 
    color: #fff; 
 
    opacity: 1!important; 
 
} 
 
::-moz-placeholder { 
 
    color: #fff; 
 
    opacity: 1!important; 
 
} 
 
:-ms-input-placeholder { 
 
    color: #fff!important; 
 
} 
 
.login-form .form-control { 
 
    padding: 0 12px; 
 
    height: auto; 
 
    font-size: 14px; 
 
    line-height: 3.428571; 
 
} 
 
.login-form .form-control, 
 
.login-form .input-group-addon { 
 
    border: 1px solid #fff; 
 
} 
 
.login-form .form-control { 
 
    border-left: none; 
 
} 
 
.login-form .input-group-addon { 
 
    border-right: none; 
 
} 
 
.btn { 
 
    padding: 12px 12px!important; 
 
    border: 1px solid #fff!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 

 
      <form class="form-inline login-form"> 
 

 
      <div class="form-group"> 
 
       <div class="input-group"> 
 
       <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i> 
 
       </div> 
 
       <input type="text" class="form-control" id="exampleInputAmount" placeholder="Username or Email"> 
 
       </div> 
 

 
       <div class="input-group"> 
 
       <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i> 
 
       </div> 
 
       <input type="text" class="form-control" id="exampleInputAmount" placeholder="Password"> 
 
       </div> 
 
      </div> 
 

 
      </form> 
 
      <div class="form-group text-right"> 
 
      <a href="">Forgot Password?</a> 
 
      </div> 
 

 
      <div class="form-group"> 
 
      <div class="btn btn-block btn-info">Login</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

その色でラウンドコーナーと背景とそのチェックボックスと、フォームフィールドを必要とします。確信が持てない場合は、このツール（http://border-radius.com/）を使用して達成してください。

2つの入力フィールドにborder-radiusを使用して、最初の入力の場合は上隅を、2番目の入力の場合は下隅をカーブするようにします。次に残りの部分を適切なスタイルにします。