css rounded and background colour - css

Question

can anyone help me achieve this looks?
I need that checkbox and form fields with round corners and background with that colour
thanks

Answer 1

Was this helpfull
.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">
Forgot Password?
</div>
<div class="form-group">
<div class="btn btn-block btn-info">Login</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You'll need to use border-radius to curve the corners. If you're unsure use this tool (http://border-radius.com/) to help you achieve it.
I would go about this by making 2 input fields use border-radius to curve the top corners only for the first input and the bottom corners for the second. Then style the rest as appropriate.