Gradient borders in CSS allow you to create borders with a gradient color effect, rather than a solid color. In this guide, we’ll cover everything you need to know to create gradient borders in CSS.
1. Basic border properties
Before we dive into gradient borders, let’s review the basic border properties in CSS.
The border property sets the width, style, and color of a border:
div {
border: 2px solid #000;
}
In this code, we’re setting the border of a <div> element to a 2px solid black line.
The border-width, border-style, and border-color properties can also be used to set the individual border properties:
div {
border-width: 2px;
border-style: solid;
border-color: #000;
}
2. Creating a gradient border
To create a gradient border, we can use the border-image property. This property allows you to use an image as a border, and can be set to a linear or radial gradient.
Here’s an example of a linear gradient border:
div {
border: 10px solid transparent;
border-image: linear-gradient(to bottom right, #f00, #00f) 1;
}
In this code, we’re setting the border of a <div> element to a 10px solid transparent line. We’re then using the border-image property to set the border to a linear gradient from red to blue. The 1 at the end of the value specifies the width of the border image.
Here’s an example of a radial gradient border:
div {
border: 10px solid transparent;
border-image: radial-gradient(circle at center, #f00, #00f) 1;
}
In this code, we’re setting the border of a <div> element to a 10px solid transparent line. We’re then using the border-image property to set the border to a radial gradient from red to blue. The 1 at the end of the value specifies the width of the border image.
3. Adding multiple gradients
You can also create a border with multiple gradients. Here’s an example:
div {
border: 10px solid transparent;
border-image: linear-gradient(to bottom right, #f00, #00f), linear-gradient(to top right, #0f0, #ff0), linear-gradient(to top left, #00f, #f00), linear-gradient(to bottom left, #ff0, #0f0);
border-image-slice: 1;
}
In this code, we’re setting the border of a <div> element to a 10px solid transparent line. We’re then using the border-image property to set the border to four linear gradients, each at a different angle. The border-image-slice property is used to specify how the border image is sliced, with a value of 1 indicating that the image should be used for the entire border.
4. Animating gradient borders
You can also animate gradient borders using CSS animations. Here’s an example:
div {
border: 10px solid transparent;
border-image: linear-gradient(to bottom right, #f00, #00f) 1;
animation: gradient-border 5s ease-in-out infinite;
}
@keyframes gradient-border {0% {
border-image: linear-gradient(to bottom right, #f00, #00f) 1;
}
50% {
border-image: linear