Having a border design is one of the things you don’t wanna miss out on in your website, it’s almost like having a room wall in this era with no designs! But the problem is you don’t want it to be just simple colors, you want it eye-catching. You just want it to be awe-inspiring!
If that is the case then don’t worry we have got you covered. In this article, we are gonna cover 5 different techniques of creating CSS gradient borders that you just don’t wanna miss out!
Now there are a lot of ways through which you can create a border but we are mostly gonna use the linear-gradient, pseudo-element, and border-image method of creating borders. So without wasting a moment let’s get started!
Note: You can fully customize these border gradients with different colors, the colors used in the article are just for sample.
Gradient with Border-Image-Source (Incompatible with Border-Radius)
If you are looking for something crisp and classic then this border gradient is just what you need. It has a border-image source and works perfectly with almost all shades of a specific color. The borders are pointed from edges giving it a neat look.
HTML Source Code:
The HTML code of this border is quite simple. All you have to do is create two <div> and give them unique classes and add the text you want between your <div> tags.
<div class="border-source-img-gradient"> <a class="border-gradient border-gradient-red"> I am red mix gradient </a> </div>
CSS Source Code:
First define the basics of CSS like the font, display, and cursor under one class name. Once you have done that, use the second class name to define the border, its width and slice the border-image.
Lastly, use the border-image-source property to define the linear gradient of the border along with the colors you wanna use.
/*Gradient with <code>boder-image-source</code> (incompatible with <code>border-radius</code>)*/
.border-source-img-gradient a {
text-decoration: inherit;
font-family: inherit;
font-size: 1rem;
padding: 1.2rem 2.5rem;
color: #7f5014;
display: inline-block;
cursor: pointer;
}
.border-gradient {
border: 12px solid;
border-image-slice: 1;
border-width:6px;
}
.border-gradient-red {
border-image-source: linear-gradient(to left, #D50D0D, #F0931C);
}
If you like anyone from the demo then we have a unique class for each border color. Just pick and apply.
.border-gradient-purple {
border-image-source: linear-gradient(to left, #a522d5, #e1219c);
}
.border-gradient-blue {
border-image-source: linear-gradient(to left, #0D2CD5, #1DC9E5);
}
.border-gradient-green {
border-image-source: linear-gradient(to left, #0DD56E, #4F890C);
}Gradient with linear-gradient Background (Possible to Apply border-radius)
Now if you are looking for something that is slightly smooth on the edges then this next gradient technique is just for your webpage. The gradient is created using the linear background property and gives a slidey touch on the edges
HTML Source Code:
The HTML code is quite simple. All you have to do is create a <div> within a <div> and give them seperate class names. Write the text in the <div> that you wanna use inside the border.
<div class="linear-border-gradient"> <div class="border-module"> Your text here </div> </div>
CSS Source Code:
Start off by adjusting the width, position, and padding. Then by using the linear gradient property adjust the background of the border and the colors you want to give to your border.
Lastly, In the other class adjust the background color that you want to use within the borders with the text.
/* Gradient with <code>linear-gradient</code> Background */
.linear-border-gradient {
width: 100%;
position: relative;
background: linear-gradient(to right, #ffb300, #7ae80c);
padding: 5px;
border-radius: 5px;
}
.border-module {
background: #bee0e9;
color: #115a62;
padding: 1.5rem;
}Gradient with pseudo-element (Compatible with border-radius)
The next technique on this list will be created via the pseudo element and is compatible with border radius as well. This gradient not only curves the edges of the border but gives a smooth look.
If the right combination of colors is used in this gradient then this one will never disappoint you.
HTML Source Code:
The code of this gradient is quite easy, all you have to do is create a class and give it a name under a <div>. Then use a <p> tag and write the content you want in your border.
<div class="pseudo-element-gradient"> <p>Your text here </p> </div>
CSS Source Code:
The first thing you wanna do is define all the essential elements that are required like position, margin, flex, background, color, border, and border-radius. You can feel free to copy the source code provided below.
Next, you want to set the position of the gradient before, add the margin, border-radius, and lastly background with a linear gradient of the color of your choice.
.pseudo-element-gradient {
display: flex;
align-items: center;
margin: auto;
position: relative;
padding: .5rem 1rem;
box-sizing: border-box;
color: #4A4545;
background: #dcf8f3;
background-clip: border-box;
background-clip: padding-box;
border: solid 5px transparent;
border-radius: 1em;
}
.pseudo-element-gradient:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -5px;
/* !importanté */
border-radius: inherit;
/* !importanté */
background: linear-gradient(to right, #0ef2dd, #0cbcf2);
}
Gradient using border-image (Two Side Border)
If you are wondering that you have tried it all, then you might be wrong because the next gradient technique that is on this list is simply unique and there is no other gradient like this.
This gradient only has sides on the left and right but no border on the top or bottom! We can call it Partial Border on Box Element
HTML Source Code:
The HTML code consists of a <div> tag given a class name and the text that will be used in between the borders.
<div class="border-image-gradient"> Your text here! </div>
CSS Source Code
In CSS, first we are gonna start off with setting the background color between the radius. Then choose the color of the text and adjust the border width along. Next style the border to solid.
Lastly, add a border-image with a linear gradient and adjust the colors you wanna use on the sides of the borders.
/* Gradient with <code>border-image</code> (Compatible with <code>border-radius</code>) */
.border-image-gradient {
background: #fff;
padding: 1rem;
color: #4c5243;
border-width: 5px;
border-style: solid;
border-image: linear-gradient(to bottom, #0064ff, rgb(238, 213, 13)) 1 100%;
}
Animated CSS Gradient Border pseudo-element
Now if you wanna have something out of the box then this border is just for you. This border has animation that is being played along with the RGB effect.
Though the complexity of this border is greater than the rest, don’t worry we have got you covered with that as well.
HTML Source Code:
The HTML code of this animation’s CSS border is quite simple. All you have to do is define a <div> and give it a class name along with an ID.
<div class="animated-gradient-border" id="box"> Your text here! </div>
CSS Source Code:
First of all we are gonna define the box that is gonna have this border.
The next thing you want to do is initiate the animated gradient border with border width of 3 px then to make the animation work mathematically by changing the values of the positions so that the colors rotate.
Lastly, you wanna define all colors that you will be needing for the borders and the
the next thing you wanna do is add keyframes to the animated gradient and define background percentages at different positions.
#box {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
color: #51645d;
padding: 1rem;
}
.animated-gradient-border {
--borderWidth: 3px;
background: #fafafa;
position: relative;
border-radius: var(--borderWidth);
}
.animated-gradient-border:after {
content: "";
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(
60deg,
#ef7f0f,
#ed421f,
#ed1b56,
#c812e6,
#0c4ac4,
#027b8e,
#05dcbe,
#07dc3d
);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
-webkit-animation: animatedgradient 3s ease alternate infinite;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@-webkit-keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}Final words:
In this article, we have listed 5 different techniques that you can use to create gradient borders in CSS. One thing we wanna add up is that these gradients should be used creatively and can be adjusted according to your need.
If you have any queries related to this article feel free to mention them in the comments below.