The border property in CSS allows web designers to specify the style, width, and color of the borders of an element.
In CSS, a gradient allows a designer to apply a smooth transition between two or more colors. You can use gradients to create visual effects such as shading, color blending, and texture on the elements on your web page.
Border gradient is a CSS property that allows developers to apply a gradient to an element’s border.
A gradient border creates a visual effect where the border’s color changes from one color to another.
Why use a gradient border?
Border gradients were among the various styling features that were introduced in CSS3. These are some of the reasons why you should have it on your next web app:
- A border gradient is flexible: You can create complex and layered effects using gradient borders. This is unlike solid color borders, which are rigid. Gradient borders are thus useful when dealing with complex layouts or shapes that demand nuanced visual designs.
- Create visual appeal: Using the gradient border effect, you can add eye-catching visual effects to your designs. For instance, you can use bold color contrasts to help draw attention to a specific element on your webpage.
- Provide seamless integration: Gradient borders allow you to seamlessly integrate the border into your element’s background. Such an approach gives your webpage a solid and cohesive look, showing a well-thought design.
How to add Border Gradient in CSS
Before we demonstrate how to add a border gradient, we can illustrate how to add a border to an HTML element.
We can use this code;
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box contains-border">
How to add a Border illustrated!!!
</div>
</body>
</html>CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}The rendered page will appear as:
Even though the above code has a border, it is not so appealing to the eyes as it is blank. We only have a 5px solid Rebecca purple border around our div.
We can make our border appealing using border gradients. There exist different approaches to adding a border gradient. The following are some of the major ones:
Using Gradient Borders (Linear Gradient, Radial Gradient, Conic Gradient)
We will illustrate how to use Gradient Borders in three different ways:
Linear Gradient
A linear gradient creates a smooth transition between two or more colors in a straight line. We can use the following code to demonstrate:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Linear Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box linear-gradient">
Linear Gradient Illustration
</div>
</body>
</html>CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}We have specified the border style as solid, meaning the border around our box is a solid line. The border width on our code is 10px.
The linear gradient starts with rgb(143, 55, 0)” and ends with “rgb(66, 228, 250)”. We have also specified a 45 degrees angle. The width of the border image slice is set to “1”.
The rendered page will appear as:
Radial Gradient
A radial gradient creates a circular gradient radiating from a central point, allowing users to transition from one color to another in a web page’s element.
We can illustrate how to add a radial gradient using this code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Radial Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box radial-gradient">
Radial Gradient Illustration
</div>
</body>
</html>CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}We have set the border style of our element as solid. We have also given our border a border width of 5px.
The radial gradient starts with dark green RGB(0,143,104) and ends with bright yellow, denoted by rgb(250,224,66).
The ‘1’ at the end of the code represents the border-image-repeat property. This value instructs the browser to repeat the border image only once around the element’s border.
The rendered page will appear as:
Conic Gradient
A conic gradient creates a circular color transition. In this effect, the transition starts from a central point and then spreads outwards, forming a circular effect.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Conic Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box conic-gradient">
Conic Gradient Illustration
</div>
</body>
</html>CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}In this code, we set the border style as solid and give the border a width of 7.5px. The border-image property sets the border gradient. There are seven colors, starting with red and ending with rgb(255, 0, 38).
Figure ‘1’ at the end of the code gives the border width of 1 pixel.
The rendered page will appear as:
Using Border Images
Border images replace the standard solid borders of HTML elements. Border images are used to create complex designs instead of combining colors to create a border gradient.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Border Images Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box border-images">
Border Images Illustration
</div>
</body>
</html>CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}We have given our border-width property a width of 15px and set the border-style as solid.
The border-image-slice sets the width and height of the border box to 60% and 30%, respectively.
The rendered page will appear as:
Using Shorthand Property
A shorthand property allows developers to style multiple individual CSS properties using one line of code. For this case, we use border-image to specify border-image-source and border-image-slice.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shorthand Property Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box shorthand">
Shorthand Property Illustration
</div>
</body>
</html>CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}The rendered page will appear as:
CSS border gradient generators
CSS border gradient generators help developers add gradient effects on elements on a web page. These generators allow you to adjust the settings, meaning you don’t have to create everything from scratch. The following are some of the tools you can use:
#1. CSS Gradient Generator-Converting Colors
The Converting Colors allows you to generate linear or radial gradient CSS code with up to five colors. The CSS gradient code you generated can be used as an element’s border or background image.
You can do the following with this generator;
- Select up to five colors and use them in the border gradient.
- Choose the direction of the gradient. The tool has both linear and radial gradients.
- You can decide how the transition of colors happens using the color stop feature.
Once you are done experimenting and generating the code, you can copy and use it on your website.
#2. CSS Border Gradient Generator-Unused CSS
Unused-CSS helps developers generate gradient borders that they can apply to block elements without creating pseudo-elements or extra elements.
You can do the following;
- Choose between different gradient types. You can easily switch between radial and linear gradients when working with this tool.
- Preview tab. The tool lets you preview how the border gradient will appear on your web page as you customize it.
- Color stops. This tool makes it easy to decide how transitions will occur for different colors.
- Border size customization. You can customize the border size and border radius easily with this tool.
Once you are satisfied with the code generated, you can copy and use it on your project.
#3. Gradient Border Generator- Amit Sheen
This tool has eight different background areas, enabling developers to create rounded gradient border effects.
You can achieve the following;
- Create gradient animations. The tool allows you to generate gradient animations that transition between two or more colors.
- You can include JavaScript code. If your customizable element needs JS code, you can always find and customize it from the control panel.
- Live preview. You can view the changes to your code as you customize it.
You can copy-paste the code after customizing your border gradient effects to your liking.
Conclusion
When designing your web pages, you can use any of the above approaches to add a gradient border to your elements. The choice of approach may vary based on preference, skill level, and the nature of the element you are styling.
You may also use different approaches for different elements on the same web page.
Check out how to create a double border in CSS to improve your webpage’s visual appeal.