Gradient borders provide beauty to any project or design. CSS has two ways to create rainbow gradient borders if you want to make one for your design.
The first and the most straightforward approach is to use the border-image property.
1. Border-image Property
It allows you to specify the image to be used around the borders. The border-image property is a shorthand property for: (border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat).
Syntax
border-image: source slice width outset repeat;
Now let’s create rainbow gradient borders using the border-image property.
How to Create Rainbow Gradient Border Using border-image
For creating this program, you need to create two files. The first is for HTML, and the other is for CSS.
index.html
Create an index.html file and place this given code there.
<html>
<body>
<a href="#" class="button">
<span>RAINBOW BORDERS</span>
</a>
</body>
</html> style.css
Now create the style.css file and place this given code there.
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
height: 250px;
width: 800px;
align-items: center;
justify-content: center;
}
.button {
border-style: solid;
border-width: 5px;
border-image: linear-gradient(45deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) 1;
background-size: 300% 300%;
}
.button span {
display: inline-block;
color: black;
padding: 2rem 5rem;
border-radius: 5px;
font-family: "Arial";
font-weight: 800;
font-size: 2.5rem;
}
We can implement gradient borders this way, but this approach has one drawback: we cannot use border-radius with border-image.
.button {
boder-style: solid;
border-width: 5px;
border-image: linear-gradient(45deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) 1;
border-radius: 7px; //doesn't work
} The second and the best approach is to use the background-image property.
2. Background-image Property
The background-image property allows you to set multiple background images for an element.
Syntax
background-image: URL;
Now let’s create a rainbow gradient border using the background-image property.
How to Create Rainbow Gradient Border Using background-image
For creating this program, you need to create two files. The first is for HTML, and the other is for CSS.
index.html
Create an index.html file and place this given code there.
<html>
<body>
<a href="#" class="button">
<span>RAINBOW BORDERS</span>
</a>
</body>
</html> style.css
Now create the style.css file and place this given code there.
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-image: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
background-origin: content-box;
padding: 3px;
border-radius: 10px;
}
.button span {
display: inline-block;
background: #ffff;
color: #000000;
padding: 2rem 5rem;
border-radius: 5px;
font-family: "Arial";
font-weight: 800;
font-size: 2.5rem;
}
Now let’s create animated rainbow gradient borders.
style.css
html, body {
height: 100%;
overflow: hidden;
}
.body {
display: flex;
height: 250px;
width: 800px;
align-items: center;
justify-content: center;
}
.button {
background-image: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
background-origin: content-box;
padding: 3px;
border-radius: 10px;
animation: animatedborder 3s ease alternate infinite;
background-size: 400% 400%;
}
.button span {
display: inline-block;
background: #ffff;
color: #000000;
padding: 2rem 5rem;
border-radius: 5px;
font-family: "Arial";
font-weight: 800;
font-size: 2rem;
}
@keyframes animatedborder {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
These were the two approaches we used to make the rainbow gradient border. Now it’s your turn to share the name of your preferred approach in the comments section below.
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
