How Can I Create Gradient Borders in CSS?

How to Achieve Gradient Borders in CSS

Applying gradients to CSS borders, contrary to expectations, is not as straightforward as it seems. While the syntax border-color: -moz-linear-gradient(top, #555555, #111111); may appear intuitive, it fails to produce the desired effect.

To successfully create gradient borders, you must utilize the border-image property in conjunction with border-style and border-width. The following code snippet illustrates how to achieve this:

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

Applying this code to an HTML element, such as:

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

will result in a border with a gradient that transitions from left to right, spanning the specified border width. Note that border-radius will not work in this context.

The above is the detailed content of How Can I Create Gradient Borders in CSS?. For more information, please follow other related articles on the PHP Chinese website!