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:
- First, we create any element you want to create a fading border with classname “border”
- 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.
- Next, we have specified the border width to 6px and the border style to solid.
- Then we have to specify the “border-image-slice” property to ‘1’.
- See the above output, the fading border is created successfully.