CSS Fading Border

In this article, we will create fading Border using CSS. To create the fading border, we can use the border-image property.

Step by Step Guide to create fading border

CSS :

.border{
border-image: linear-gradient(98deg, blue, #ff000000) 1;
border-width: 6px;
border-style: solid;
width: 15%;
text-align: center; }

HTML:

<h1 class="border">Button</h1>

Output:

Steps:

1. First, we create any element you want to create a fading border with classname “border”
2. We can set the “border-image property” to create a linear gradient. We should pass an angle (98deg) and two colors to the “border-image property braces”. The first or second color must be set to be “#ff000000” transparent to create a fading border.
3. Next, we have specified the border width to 6px and the border style to solid.
4. Then we have to specify the “border-image-slice” property to ‘1’.
5. See the above output, the fading border is created successfully.