How Do I Correctly Create Gradient Borders Using CSS?

Defining Gradient Borders Using CSS

Designing a border using a gradient effect adds a touch of visual interest to web elements. The border-image property in CSS allows you to apply gradients to borders.

Question:

In an attempt to create a gradient border, the following code was used:

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

However, this approach failed to achieve the desired result. What is the correct method for implementing border gradients?

Answer:

The border-image property accomplishes this task. Along with border-width and border-style, it allows for gradient borders.

Example:

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

This code creates a border with a gradient that transitions from #3acfd5 to #3a4ed5 from left to right.

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