如何用Tailwind CSS实现倒圆角边框？含伪元素及替代方案

以下是两种实用方案，适配你需要的内凹圆角边框效果：

方案一：径向渐变快速实现（推荐） #

利用Tailwind的背景渐变能力，配合绝对定位元素绘制内凹圆角边框，无需复杂伪元素逻辑：

<!-- 四个角均为内凹倒圆角的容器 -->
<div class="relative w-64 h-32">
  <!-- 左上角内凹圆角 -->
  <div class="absolute left-0 top-0 w-20 h-20 bg-[radial-gradient(circle_at_top_left,transparent_20px,#000_20px,#000_22px,transparent_22px)]"></div>
  <!-- 右上角内凹圆角 -->
  <div class="absolute right-0 top-0 w-20 h-20 bg-[radial-gradient(circle_at_top_right,transparent_20px,#000_20px,#000_22px,transparent_22px)]"></div>
  <!-- 左下角内凹圆角 -->
  <div class="absolute left-0 bottom-0 w-20 h-20 bg-[radial-gradient(circle_at_bottom_left,transparent_20px,#000_20px,#000_22px,transparent_22px)]"></div>
  <!-- 右下角内凹圆角 -->
  <div class="absolute right-0 bottom-0 w-20 h-20 bg-[radial-gradient(circle_at_bottom_right,transparent_20px,#000_20px,#000_22px,transparent_22px)]"></div>
  
  <!-- 直边边框部分 -->
  <div class="absolute top-20 left-0 right-0 h-2 bg-gray-800"></div>
  <div class="absolute bottom-20 left-0 right-0 h-2 bg-gray-800"></div>
  <div class="absolute left-20 top-0 bottom-0 w-2 bg-gray-800"></div>
  <div class="absolute right-20 top-0 bottom-0 w-2 bg-gray-800"></div>
</div>

参数说明 #

• 20px：倒圆角的半径，可按需调整
• 22px：半径 + 边框宽度（示例中为2px），如果修改边框宽度，这里要同步调整（比如边框3px则写23px）
• #000：边框颜色，可替换为Tailwind内置颜色值（如#4b5563对应gray-600）

方案二：自定义Tailwind工具类封装 #

如果需要复用该样式，可在tailwind.config.js中自定义工具类，简化HTML代码：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'inner-corner-tl': 'radial-gradient(circle at top left, transparent 20px, #000 20px, #000 22px, transparent 22px)',
        'inner-corner-tr': 'radial-gradient(circle at top right, transparent 20px, #000 20px, #000 22px, transparent 22px)',
        'inner-corner-bl': 'radial-gradient(circle at bottom left, transparent 20px, #000 20px, #000 22px, transparent 22px)',
        'inner-corner-br': 'radial-gradient(circle at bottom right, transparent 20px, #000 20px, #000 22px, transparent 22px)',
      },
    },
  },
  plugins: [],
}

之后HTML可简化为：

<div class="relative w-64 h-32">
  <div class="absolute left-0 top-0 w-20 h-20 bg-inner-corner-tl"></div>
  <div class="absolute right-0 top-0 w-20 h-20 bg-inner-corner-tr"></div>
  <div class="absolute left-0 bottom-0 w-20 h-20 bg-inner-corner-bl"></div>
  <div class="absolute right-0 bottom-0 w-20 h-20 bg-inner-corner-br"></div>
  
  <div class="absolute top-20 left-0 right-0 h-2 bg-gray-800"></div>
  <div class="absolute bottom-20 left-0 right-0 h-2 bg-gray-800"></div>
  <div class="absolute left-20 top-0 bottom-0 w-2 bg-gray-800"></div>
  <div class="absolute right-20 top-0 bottom-0 w-2 bg-gray-800"></div>
</div>

注意事项 #

• 如果只需要左右两侧的倒圆角（而非四个角），可删除上下两个角的渐变元素，同时调整主元素的上下边框替代直边部分
• 若容器背景非纯色，可给渐变元素添加mix-blend-mode: multiply或者确保渐变的透明区域与容器背景一致

内容的提问来源于stack exchange，提问作者Alex Bryson