• Post category:CSS

How to Create Fading Border Using CSS

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:

css fading border

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.

Leave a Reply