"Border Boxes - Gradient Background"
Bootstrap 4.1.1 Snippet by webui

<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*/

Related: See More


Questions / Comments: