Method 1: border-image

The simplest approach is the border-image property. It accepts any CSS gradient as a source and tiles it along the border. This is a one-line solution that works in all modern browsers.

CSS
.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c6fff, #ff6fb0) 1;
}

The 1 at the end is the border-image-slice value. For gradients you almost always want 1 so the entire gradient fills the border. The catch with border-image is that it doesn't work with border-radius — the border will always be rectangular.

Method 2: background-clip with padding

This technique uses two layered backgrounds and background-clip to simulate a gradient border that does respect border-radius.

CSS
.gradient-border-rounded {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #7c6fff, #ff6fb0) border-box;
}

The first background (padding-box) fills the inner area with your desired background color. The second background (border-box) places the gradient behind the entire element including the border area. Since the border is transparent, the gradient shows through only in the border region. This is the most popular method for rounded gradient borders.

Method 3: Pseudo-element wrapper

For more complex effects like animated gradient borders, a pseudo-element approach gives you the most control. You create a slightly larger gradient element behind your content using ::before or ::after.

CSS
.gradient-border-animated {
  position: relative;
  border-radius: 12px;
  padding: 3px; /* acts as border width */
  background: linear-gradient(135deg, #7c6fff, #ff6fb0);
}
.gradient-border-animated::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  background: var(--bg);
}

The outer element shows the gradient, and the inner pseudo-element masks the center, leaving only the border visible. You can animate the gradient's angle with @property for a rotating border effect. This method is especially useful for hover animations and card components.

Method 4: Using mask-composite

The mask-composite approach is the newest and cleanest, though browser support is more limited. It uses CSS masks to literally cut out the inner area of a gradient background.

CSS
.gradient-border-mask {
  border-radius: 12px;
  background: linear-gradient(135deg, #7c6fff, #ff6fb0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
}

This is the most elegant solution — no pseudo-elements, no layered backgrounds. However, mask-composite support varies: Chrome 120+, Firefox 53+, and Safari 15.4+. Check Can I Use for the latest numbers.

Which Method Should You Use?

For rectangular borders without border-radius, use border-image — it's the simplest. For rounded gradient borders, the background-clip method is the most widely supported and reliable. For animated borders, go with the pseudo-element approach. For modern projects targeting only recent browsers, mask-composite is the cleanest code.

Want to design the perfect gradient for your border? Try our CSS Gradient Generator to create the gradient visually, then paste the code into any of the methods above.