In the past, to create special borders like gradient we often use images. Today, it becomes much cleaner with the use of CSS3 Gradient Border color. The method is by using CSS3 border-image property. The border-image property in CSS3 allows us to fill the border with an image as well as CSS3 Gradient. The browsers support for border-image are quite great; Chrome, Internet Explorer 11, Firefox, Safari, and Opera are all capable to fully render border-image. Following I have made a little example by applying CSS3 Gradient border color. Well, let’s see how the trick works.
HTML:
<div class=”c-boder”>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s</p>
</div>
<div class=”c-boder-1″>
Cactustheme
</div>
CSS:
.c-boder {
clear: both;
margin: 20px auto;
padding: 10px;
width: 200px;
height: 100px;
border-top: 3px solid black;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:-moz-linear-gradient(#000, transparent),-moz-linear-gradient(#000, transparent);
background-image:-o-linear-gradient(#000, transparent),-o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent),linear-gradient(#000, transparent);
-moz-background-size: 3px 100%;
background-size: 3px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
.c-boder-1 {
font-size: 70px;
line-height: 170px;
margin: 50px auto;
font-weight: bold;
width: 450px;
padding: 20px;
text-align: center;
height: 250px;
color: #3ACFD5;
border-top: 20px solid #3ACFD5;
border-bottom: 20px solid #3a4ed5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 20px 100%;
-moz-background-size: 20px 100%;
background-size: 20px 100%;
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}
Link demo: https://jsfiddle.net/TrinhThang/mr9soh0u/10/
Note: The border-image will only work on rectangular shapes or boxes. That means adding border-radius will deviate the border-image output.
