如何使用Tailwind或CSS创建如图所示的多色边框？

根据你需要的多色分段边框效果，这里提供三种Tailwind实现方案，均避开渐变方案：

方案一：四边独立色边框（适配直角/圆角） #

通过绝对定位的四个色块模拟不同颜色的边框，可精准控制每一条边的颜色与厚度：

<!-- 父容器：相对定位，控制整体尺寸 -->
<div class="relative w-72 h-72 bg-white rounded-md overflow-hidden">
  <!-- 顶部蓝色边框 -->
  <div class="absolute top-0 left-0 right-0 h-[3px] bg-blue-500"></div>
  <!-- 右侧紫色边框 -->
  <div class="absolute top-0 right-0 bottom-0 w-[3px] bg-purple-500"></div>
  <!-- 底部绿色边框 -->
  <div class="absolute bottom-0 left-0 right-0 h-[3px] bg-green-500"></div>
  <!-- 左侧黄色边框 -->
  <div class="absolute top-0 left-0 bottom-0 w-[3px] bg-yellow-500"></div>
  
  <!-- 内容区域：加内边距避免内容贴边框 -->
  <div class="p-5">
    自定义内容
  </div>
</div>

若需要圆角效果，给每个边框色块添加对应圆角类即可：

• 顶部边框加 rounded-t-md
• 右侧边框加 rounded-r-md
• 底部边框加 rounded-b-md
• 左侧边框加 rounded-l-md

方案二：角落分段色边框（局部多色） #

如果仅需要角落区域为不同颜色、中间为统一边框，可使用以下方式：

<div class="relative w-72 h-72 border-2 border-gray-200 rounded-md">
  <!-- 左上角蓝色角 -->
  <div class="absolute top-0 left-0 w-20 h-2 bg-blue-500 rounded-tl-md"></div>
  <!-- 右上角紫色角 -->
  <div class="absolute top-0 right-0 w-20 h-2 bg-purple-500 rounded-tr-md"></div>
  <!-- 右下角绿色角 -->
  <div class="absolute bottom-0 right-0 w-20 h-2 bg-green-500 rounded-br-md"></div>
  <!-- 左下角黄色角 -->
  <div class="absolute bottom-0 left-0 w-20 h-2 bg-yellow-500 rounded-bl-md"></div>
  
  <div class="p-5">自定义内容</div>
</div>

方案三：自定义Tailwind工具类（复用场景） #

如果需要多次复用该样式，可在 tailwind.config.js 中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        // 用阴影模拟多色边框，仅适配直角场景
        'multi-border': '3px 0 0 0 #3b82f6, 0 3px 0 0 #a855f7, -3px 0 0 0 #10b981, 0 -3px 0 0 #eab308',
      },
    },
  },
}

使用时直接给元素添加类即可：

<div class="w-72 h-72 bg-white shadow-multi-border p-5"></div>

内容的提问来源于stack exchange，提问作者Dhinesh Kumar