<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-md-3">
<p>Border Style 1</p>
<div class="style-border-1"></div>
</div>
<div class="col-md-3">
<p>Border Style 2</p>
<div class="style-border-2"></div>
</div>
<div class="col-md-3">
<p>Border Style 3</p>
<div class="style-border-3"></div>
</div>
<div class="col-md-3">
<p>Border Style 4</p>
<div class="style-border-4"></div>
</div>
</div>
</div>
.style-border-1{
width:100px;
height:100px;
border-radius: 5px 20px 5px;
background: #40E0D0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.style-border-2{
width:100px;
height:100px;
border-radius: 10px/30px; /* horizontal radius / vertical radius */
background: #dd3e54; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6be585, #dd3e54); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6be585, #dd3e54); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.style-border-3{
width:100px;
height:100px;
border-radius: 50%;
background: #b92b27; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1565C0, #b92b27); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1565C0, #b92b27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.style-border-4{
width:100px;
height:100px;
border-radius: 30px/10px;
background: #c94b4b; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4b134f, #c94b4b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4b134f, #c94b4b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/*Ref - CSS Tricks*/
