掌握Tailwind CSS中border和border-radius工具类可提升开发效率：1. 使用border、方向类、宽度类、样式类和颜色类快速设置边框；2. 利用rounded系列类控制圆角大小及方位；3. 结合边框与圆角构建卡片、输入框、按钮等组件，并配合overflow-hidden实现内容裁剪。
在现代前端开发中，使用CSS工具类（Utility Classes）可以快速设置样式，尤其是在使用Tailwind CSS这类原子化框架时。针对边框（border）和圆角（border-radius）的设置，掌握常用工具类能极大提升开发效率。
设置边框：border
通过预定义的工具类，你可以快速为元素添加边框：
- border：添加默认的1px实线边框（颜色通常由当前文本色或框架主题决定）
- border-t、border-r、border-b、border-l：仅给上、右、下、左边添加边框
- border-2、border-4、border-8：设置边框宽度为2px、4px、8px
- border-solid、border-dashed、border-dotted：设置边框样式
- border-gray-300、border-blue-500：设置边框颜色（基于颜色调色板）
例如：
<div class="border border-gray-300 border-dashed p-4"> 这是一个带虚线边框的容器 </div>
设置圆角：border-radius
圆角控制元素的角落弧度，常见工具类包括：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- rounded：添加默认圆角（如4px或0.25rem）
- rounded-md、rounded-lg、rounded-xl、rounded-2xl、rounded-full：不同大小的圆角，full 可创建圆形或胶囊形
- rounded-t-lg、rounded-b-none：单独控制顶部或底部圆角
- rounded-l-md、rounded-r-full：单独控制左右两侧圆角
示例：
<button class="bg-blue-500 text-white px-4 py-2 rounded-full"> 胶囊按钮 </button> <div class="border border-gray-300 rounded-lg p-6"> 内容卡片，带圆角和边框 </div>
组合使用技巧
实际项目中，常将边框与圆角结合使用，比如创建卡片、输入框、徽章等组件：
- 卡片容器：
class="border border-gray-200 rounded-lg p-4" - 输入框聚焦效果：
class="border border-gray-300 focus:border-blue-500 rounded-md" - 头像圆形显示：
class="w-12 h-12 rounded-full overflow-hidden"
注意：overflow: hidden 需配合 rounded 使用，才能让内部内容（如图片）也被裁剪成圆角。
基本上就这些，熟练运用这些工具类，能让你在不写一行自定义CSS的情况下，快速构建出美观的界面元素。
