Tailwind CSS Bordes

En Tailwind CSS,los bordes(Borders) son estilos comunes en la maquetación y el diseño, utilizados para añadir bordes o líneas de separación a los elementos.

Tailwind ofrece varias clases de utilidad de bordes que te ayudan a controlar el ancho, el color, el estilo, el radio y los bordes de cada dirección.

Ancho del borde (Border Width)

El ancho del borde determina el grosor de la línea del borde de un elemento. Tailwind CSS ofrece diferentes valores de ancho de borde que te permiten controlar rápidamente el estilo del borde de los elementos.

Color del borde (Border Color)

Mediante el uso deborder-{color}clases de utilidad, puedes establecer el color del borde de los elementos. Tailwind CSS ofrece una gran cantidad de colores predefinidos que se pueden usar directamente, y también admite colores personalizados.

<div class="border-2 border-red-500 p-4">
  红色边框，宽度为 2px
</div>

Estilo del borde (Border Style)

Tailwind CSS también admite establecer el estilo del borde, como sólido, discontinuo, punteado, etc. Medianteborder-{style}clases de utilidad, puedes controlar el estilo de visualización del borde.

<div class="border-4 border-dashed border-blue-400 p-4">
  蓝色虚线边框，宽度为 4px
</div>

Radio del borde (Border Radius)

Mediante la configuraciónborder-radiuspuedes controlar el efecto de esquinas redondeadas de los elementos. Tailwind CSS ofrece múltiples valores de radio de borde y te permite establecer diferentes esquinas redondeadas en distintas direcciones.

<div class="border-4 border-gray-400 rounded-lg p-6">
  大圆角边框
</div>

Control de bordes en las cuatro direcciones

Puedes controlar individualmente el borde de cada dirección (superior, derecha, inferior, izquierda), por ejemplo:border-t-2controlar el ancho del borde superior,border-r-4controlar el ancho del borde derecho, etc.

<div class="border-t-4 border-r-2 border-b-1 border-l-3 border-blue-500 p-4">
  自定义各个方向的边框
</div>

Control de borde uniforme (Border)

Si deseas establecer el mismo estilo para todos los bordes, usaborderclases de utilidad. Puedes combinarlas con otras clases de utilidad para controlar el color, el estilo y el ancho.

<div class="border-4 border-solid border-green-500 p-4">
  绿色实线边框，宽度为 4px
</div>

Bordes internos y externos (Box Model)

Tailwind CSS también ofrece el control delmodelo de cajamediante clases de utilidad, especialmente bordes internos y externos, márgenes y relleno, etc.

<div class="box-border border-4 border-red-500 p-4">
  边框包含在内的盒子模型
</div>

Ejemplo completo que combina todas las herramientas de borde