Tailwind CSS 边框 #

<div class="border">1px 边框</div>
<div class="border-0">无边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-8">8px 边框</div>

<div class="border-t">上边框</div>
<div class="border-r">右边框</div>
<div class="border-b">下边框</div>
<div class="border-l">左边框</div>

<div class="border-t-2">上边框 2px</div>
<div class="border-r-2">右边框 2px</div>
<div class="border-b-2">下边框 2px</div>
<div class="border-l-2">左边框 2px</div>

<!-- 行方向（RTL 友好） -->
<div class="border-s">起始边框</div>
<div class="border-e">结束边框</div>

<!-- 块方向 -->
<div class="border-bs">块起始边框</div>
<div class="border-be">块结束边框</div>

<div class="border border-gray-300">灰色边框</div>
<div class="border border-blue-500">蓝色边框</div>
<div class="border border-red-500">红色边框</div>

<div class="border border-blue-500/50">半透明边框</div>

<div class="border-2 border-t-blue-500 border-r-red-500 border-b-green-500 border-l-yellow-500">
  四边不同颜色
</div>

<div class="border border-[#1da1f2]">自定义颜色边框</div>

<div class="border border-solid">实线（默认）</div>
<div class="border border-dashed">虚线</div>
<div class="border border-dotted">点线</div>
<div class="border border-double">双线</div>
<div class="border border-hidden">隐藏</div>
<div class="border border-none">无边框</div>

<div class="rounded-none">无圆角</div>
<div class="rounded-sm">小圆角 (0.125rem)</div>
<div class="rounded">默认圆角 (0.25rem)</div>
<div class="rounded-md">中等圆角 (0.375rem)</div>
<div class="rounded-lg">大圆角 (0.5rem)</div>
<div class="rounded-xl">更大圆角 (0.75rem)</div>
<div class="rounded-2xl">超大圆角 (1rem)</div>
<div class="rounded-3xl">特大圆角 (1.5rem)</div>
<div class="rounded-full">完全圆角 (9999px)</div>

<div class="rounded-t-lg">上圆角</div>
<div class="rounded-r-lg">右圆角</div>
<div class="rounded-b-lg">下圆角</div>
<div class="rounded-l-lg">左圆角</div>

<div class="rounded-tl-lg">左上圆角</div>
<div class="rounded-tr-lg">右上圆角</div>
<div class="rounded-br-lg">右下圆角</div>
<div class="rounded-bl-lg">左下圆角</div>

<div class="rounded-ss-lg">起始起始圆角</div>
<div class="rounded-se-lg">起始结束圆角</div>
<div class="rounded-ee-lg">结束结束圆角</div>
<div class="rounded-es-lg">结束起始圆角</div>

<div class="rounded-[12px]">自定义圆角</div>

<div class="outline outline-2 outline-offset-2 outline-blue-500">
  偏移轮廓
</div>

<div class="outline-none">无轮廓</div>
<div class="outline outline-1">1px 轮廓</div>
<div class="outline outline-2">2px 轮廓</div>
<div class="outline outline-4">4px 轮廓</div>
<div class="outline outline-dashed">虚线轮廓</div>
<div class="outline outline-dotted">点线轮廓</div>
<div class="outline outline-double">双线轮廓</div>

<!-- 环宽度 -->
<div class="ring">1px 环</div>
<div class="ring-0">无环</div>
<div class="ring-1">1px 环</div>
<div class="ring-2">2px 环</div>
<div class="ring-4">4px 环</div>

<!-- 环颜色 -->
<div class="ring ring-blue-500">蓝色环</div>

<!-- 环偏移 -->
<div class="ring ring-offset-2">偏移环</div>
<div class="ring ring-offset-blue-100">偏移颜色</div>

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  焦点环效果
</button>

<!-- 垂直分割 -->
<div class="divide-y divide-gray-200">
  <div class="py-4">项目 1</div>
  <div class="py-4">项目 2</div>
  <div class="py-4">项目 3</div>
</div>

<!-- 水平分割 -->
<div class="flex divide-x divide-gray-200">
  <div class="px-4">项目 1</div>
  <div class="px-4">项目 2</div>
  <div class="px-4">项目 3</div>
</div>

<div class="divide-y divide-solid">实线</div>
<div class="divide-y divide-dashed">虚线</div>
<div class="divide-y divide-dotted">点线</div>
<div class="divide-y divide-none">无分割线</div>

<div class="divide-y divide-blue-500">
  蓝色分割线
</div>

<div class="border border-gray-200 rounded-lg p-6 bg-white">
  <h3 class="text-lg font-semibold">卡片标题</h3>
  <p class="text-gray-600 mt-2">卡片内容描述</p>
</div>

<input class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入内容">

<!-- 实心按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
  实心按钮
</button>

<!-- 轮廓按钮 -->
<button class="border-2 border-blue-500 text-blue-500 px-4 py-2 rounded-lg hover:bg-blue-500 hover:text-white">
  轮廓按钮
</button>

<!-- 圆形按钮 -->
<button class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
  </svg>
</button>

<img class="w-12 h-12 rounded-full border-2 border-white shadow" src="avatar.jpg" alt="头像">

<span class="inline-block px-3 py-1 text-sm border border-blue-500 text-blue-500 rounded-full">
  标签
</span>

<ul class="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
  <li class="p-4 hover:bg-gray-50">列表项 1</li>
  <li class="p-4 hover:bg-gray-50">列表项 2</li>
  <li class="p-4 hover:bg-gray-50">列表项 3</li>
</ul>

<div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
  <div class="flex">
    <div class="text-yellow-400">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm text-yellow-700">这是一个警告信息。</p>
    </div>
  </div>
</div>

<div class="border-4 border-white rounded-lg shadow-lg overflow-hidden">
  <img class="w-full" src="image.jpg" alt="图片">
</div>