Achieve border Gradation with border-image-source for tailwindcss 4, see live at https://play.tailwindcss.com/ecO7qn5v8C

border-image-source.css

@import "tailwindcss";

/* ============================================
   Border Gradient Utilities for Tailwind CSS 4
   ============================================ */

/* 1. Linear Gradients - 8 Directions */
@utility border-linear-to-t {
  --tw-border-gradient-position: to top;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to top in oklab;
  }
}

@utility border-linear-to-tr {
  --tw-border-gradient-position: to top right;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to top right in oklab;
  }
}

@utility border-linear-to-r {
  --tw-border-gradient-position: to right;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to right in oklab;
  }
}

@utility border-linear-to-br {
  --tw-border-gradient-position: to bottom right;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to bottom right in oklab;
  }
}

@utility border-linear-to-b {
  --tw-border-gradient-position: to bottom;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to bottom in oklab;
  }
}

@utility border-linear-to-bl {
  --tw-border-gradient-position: to bottom left;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to bottom left in oklab;
  }
}

@utility border-linear-to-l {
  --tw-border-gradient-position: to left;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to left in oklab;
  }
}

@utility border-linear-to-tl {
  --tw-border-gradient-position: to top left;
  border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    --tw-border-gradient-position: to top left in oklab;
  }
}

/* Linear - Arbitrary values */
@utility border-linear-* {
  border-image-source: linear-gradient(--value([angle]), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: linear-gradient(in lab, red, red)) {
    border-image-source: linear-gradient(--value([angle]) in oklab, var(--tw-border-gradient-stops));
  }
}

/* 2. Radial Gradients */
@utility border-radial {
  border-image-source: radial-gradient(var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    border-image-source: radial-gradient(in oklab, var(--tw-border-gradient-stops));
  }
}

@utility border-radial-to-t {
  --tw-border-gradient-position: at top;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at top in oklab;
  }
}

@utility border-radial-to-tr {
  --tw-border-gradient-position: at top right;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at top right in oklab;
  }
}

@utility border-radial-to-r {
  --tw-border-gradient-position: at right;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at right in oklab;
  }
}

@utility border-radial-to-br {
  --tw-border-gradient-position: at bottom right;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at bottom right in oklab;
  }
}

@utility border-radial-to-b {
  --tw-border-gradient-position: at bottom;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at bottom in oklab;
  }
}

@utility border-radial-to-bl {
  --tw-border-gradient-position: at bottom left;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at bottom left in oklab;
  }
}

@utility border-radial-to-l {
  --tw-border-gradient-position: at left;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at left in oklab;
  }
}

@utility border-radial-to-tl {
  --tw-border-gradient-position: at top left;
  border-image-source: radial-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    --tw-border-gradient-position: at top left in oklab;
  }
}

/* Radial - Arbitrary values */
@utility border-radial-* {
  border-image-source: radial-gradient(--value([*]), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: radial-gradient(in lab, red, red)) {
    border-image-source: radial-gradient(--value([position]) in oklab, var(--tw-border-gradient-stops));
  }
}

/* 3. Conic Gradients */
@utility border-conic {
  border-image-source: conic-gradient(from 0deg, var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: conic-gradient(in lab, red, red)) {
    border-image-source: conic-gradient(from 0deg in oklab, var(--tw-border-gradient-stops));
  }
}

/* Conic - Bare number angles + Arbitrary values */
@utility border-conic-* {
  border-image-source: conic-gradient(--value('from 'integer'deg', [*]), var(--tw-border-gradient-stops));
  border-image-slice: var(--tw-border-image-slice, 1);
  @supports (border-image-source: conic-gradient(in lab, red, red)) {
    border-image-source: conic-gradient(from --value(integer, [angle])deg in oklab, var(--tw-border-gradient-stops));
  }
}
@utility border-conic/decreasing {
  border-image-source: conic-gradient(in oklch decreasing hue, var(--tw-border-gradient-stops));
}

/* 4. Gradient Color Stops (Theme + Arbitrary) */
@utility border-from-* {
  --tw-border-gradient-from: --value(--color-*, [color]);
  --tw-border-gradient-to: rgb(255 255 255 / 0);
  --tw-border-gradient-stops: var(--tw-border-gradient-from), var(--tw-border-gradient-to);
}

@utility border-via-* {
  --tw-border-gradient-via: --value(--color-*, [color]);
  --tw-border-gradient-stops: var(--tw-border-gradient-from), var(--tw-border-gradient-via), var(--tw-border-gradient-to);
}

@utility border-to-* {
  --tw-border-gradient-to: --value(--color-*, [color]);
  --tw-border-gradient-stops: var(--tw-border-gradient-from), var(--tw-border-gradient-to);
}

/* 5. Border Image Slice (Theme + Arbitrary) */
@utility border-image-slice-* {
  --tw-border-image-slice: --value(--border-image-slice-*, [number]);
}

example.html

<!-- Linear - Directions -->
<div class="border-8 border-linear-to-r border-from-cyan-500 border-to-blue-500">
  Linear to right
</div>

<!-- Linear - Arbitrary angle -->
<div class="border-8 border-linear-[123deg] border-from-red-500 border-to-yellow-500">
  Linear 123deg
</div>

<!-- Radial - Center -->
<div class="border-8 border-radial border-from-pink-400 border-to-fuchsia-700">
  Radial center
</div>

<!-- Radial - Positioned -->
<div class="border-8 border-radial-to-br border-from-yellow-400 border-to-orange-600">
  Radial to bottom right
</div>

<!-- Radial - Arbitrary position -->
<div class="border-8 border-radial-[at_50%_75%] border-from-sky-200 border-to-indigo-900">
  Radial at 50% 75%
</div>


<!-- Conic - Base -->
<div class="border-8 border-conic border-from-blue-600 border-to-sky-400">
  Conic 0deg
</div>

<!-- Conic - Bare number -->
<div class="border-8 border-conic-180 border-from-indigo-100 border-to-indigo-600">
  Conic 180deg
</div>

<!-- Conic - Arbitrary angle -->
<div class="border-8 border-conic-[from_270deg] border-from-purple-500 border-to-pink-500">
  Conic from 270deg
</div>

<!-- Conic - Interpolation modifier -->
<div class="border-8 border-conic/decreasing border-from-violet-700 border-via-lime-300 border-to-violet-700">
  Conic decreasing
</div>

<!-- Custom colors -->
<div class="border-8 border-linear-to-r border-from-[#eac0ff] border-to-[#9500e4]">
  Custom hex colors
</div>

<!-- Via colors -->
<div class="border-8 border-linear-to-br border-from-[#ff6b6b] border-via-[#feca57] border-to-[#48dbfb]">
  Via colors
</div>

<!-- Custom slice -->
<div class="border-8 border-linear-to-r border-from-cyan-500 border-to-blue-500 border-image-slice-2">
  Custom slice
</div>