<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>




<div class="form-group">
<div class="radius-input">
<input type="text" class="form-control" placeholder="name">
</div> </div>

<div class="form-group">
        <div class="radius-input">
        <input type="mail" class="form-control" placeholder="Email">
        </div> </div>
        

        <div class="form-group">
                <div class="radius-input">
                <input type="mail" class="form-control" placeholder="Mobile Number">
                </div> </div>

                
        <div class="form-group">
                <div class="radius-input">
                <input type="password" class="form-control" placeholder="Password">
                </div> </div>
  
                
        <div class="form-group">
                <div class="radius-input">
           <select name="" id="" class="form-control"> <option value=""> India</option>
             
             <option value=""> usa</option>
                  </select>
                </div> </div>
  
       <div class="form-group">
                <div class="radius-input">
       <textarea name="" id="" cols="10" rows="3" class="form-control"  placeholder="Message"></textarea> 
                  </select>
                </div> </div>
  
  
       <div class="form-group text-center mt-4">
         <button class="submt_btn"> Submit</button>
                </div> </div>



</body>

</html>
body {
padding: 100px 20px; 
 background-color: rgba(8, 8, 8, 0.99)!important;
}

.radius-input {
  position: relative;
  background: linear-gradient(90deg, #9a04ff 0%, #fb1717 86%);
  padding: 2px;
  border-radius: 45px;  
  
  .form-control {
    background-color:  rgba(8, 8, 8, 0.99);
    border-radius: 45px;
    border: none;
    text-transform: capitalize;
    min-height: 50px;
}  
  
  textarea.form-control{padding:10px 50px;}  
}

button.submt_btn {
    background-color: #353131;
    color: #fff;
    border: none;
    border-radius: 45px;
    padding: 10px 50px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.