cssbordergradientlinear-gradients

How to do gradient borders in CSS

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

But this does not work.

Does anyone know what is the correct way to do border gradients?

Solution

  • The border-image property can accomplish this. You'll need to specify border-style and border-width too.

    .border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}
    <p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

    Read more on MDN.