How Can I Create Rounded Corners with a Gradient Border in CSS?

Implementing Border-Radius and Gradient Border-Images

Styling elements with a rounded border and a gradient can be challenging. Attempting to combine both border-radius and border-image properties often results in either rounded corners without a gradient or a gradient border without rounding.

Solution:

Fortunately, it is possible to achieve both rounded corners and gradient borders by utilizing a combination of CSS techniques. Here's a non-SVG solution that offers a more concise approach:

div {
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Explanation:

• The transparent double border sets the width and eliminates any initial border color.
• The background-image property creates two gradients: a white one at the start and a colored one towards the end.
• background-origin: border-box positions the gradient on the border, aligning it with the rounded corners.
• background-clip: content-box, border-box controls how the gradient is clipped, ensuring that the border remains gradient-filled and the inner area remains white.

With this technique, you can stylishly combine rounded corners and gradient borders.

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