0

On a WordPress website, I'm using the following code to get gradient on the border-bottom:

    border-bottom: 2px solid linear-gradient(to right, #13a338 0%, #1f3876 100%);

However it does not seem to work. Shall I use another CSS property or what am I doing wrong here?

Janak Gajjar
  • 11
  • 1
  • 2

2 Answers2

3

You can't do this with the standard border property since the constituent border-color only accepts a color.

What you can do, however, is use the border-image property as shown in the following blog post on CSS-Tricks.com: Gradient Borders in CSS.

Here's an example using your gradient to draw elements with a bottom border. Note that we've specified the border-image-slice property (0 0 100% 0) to only draw the bottom. The border-radius property does not work with this option.

.border-imaged-element {
  max-width: 50%;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to right, #13a338 0%, #1f3876 100%
    ) 0 0 100% 0;
}
<p class="border-imaged-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt dolor non ante feugiat gravida. Vivamus hendrerit metus sit amet ligula pretium, a dapibus ante semper.</p>
<p class="border-imaged-element">Cras vehicula ante mi, eu luctus odio accumsan facilisis. Nulla efficitur malesuada luctus. Vestibulum sed eros finibus, iaculis purus sed, pretium urna. Integer eget erat nec tellus elementum euismod. Nunc laoreet elit eget velit facilisis, fringilla tempus ligula egestas.</p>
<p class="border-imaged-element">Vestibulum vestibulum, libero ac vestibulum sollicitudin, lectus nibh convallis massa, in imperdiet arcu lorem vel nunc.</p>
D M
  • 5,769
  • 4
  • 12
  • 27
-2

It's very hard, basically impossible to do this with plain CSS. This is mostly used for backgrounds But what you can do is create a div behind your main div and add a gradient to it. You can then just transform the back div by 2px or so and you will get that border gradient effect

Look here for more help: https://css-tricks.com/gradient-borders-in-css/

Ruben Verster
  • 301
  • 1
  • 8