Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad border-width de CSS . Esta clase se usa para establecer el ancho del borde de los cuatro lados de un elemento. La propiedad border-width es la combinación de cuatro propiedades
Clases de ancho de borde:
- borde
- frontera-0
- frontera-2
- frontera-4
- frontera-8
- frontera-t
- frontera-t-0
- frontera-t-2
- frontera-t-4
- frontera-t-8
- frontera-r
- frontera-r-0
- frontera-r-2
- frontera-r-4
- borde-r-8
- frontera-b
- borde-b-0
- borde-b-2
- frontera-b-4
- borde-b-8
- frontera-l
- frontera-l-0
- frontera-l-2
- frontera-l-4
- frontera-l-8
Todos los lados: en esta sección, la clase se ha utilizado para establecer el ancho del borde para todos los lados de un elemento. Las clases son border, border-0, border-2, border-4 y border-8.
Sintaxis:
<element class="border-{number}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Width Class</b> <div class="mx-4 grid grid-cols-5 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="border-0 border-green-900 bg-green-400 w-full h-12"> border-0 </div> <div class="border border-green-900 bg-green-400 w-full h-12"> border </div> <div class="border-2 border-green-900 bg-green-400 w-full h-12"> border-2 </div> <div class="border-4 border-green-900 bg-green-400 w-full h-12"> border-4 </div> <div class="border-8 border-green-900 bg-green-400 w-full h-12"> border-8 </div> </div> </body> </html>
Producción:
Lados individuales: en esta sección, la clase se ha utilizado para establecer el ancho del borde para los lados individuales de un elemento. Las clases son border-{side}-0, border-{side}-2, border-{side}-4, border-{side}-8 y border-{side}.
Sintaxis:
<element class="border-{side}-{number}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Width Class</b> <div class="mx-4 grid grid-cols-4 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="border-b-2 border-green-900 bg-green-400 w-full h-12"> border-b-2 </div> <div class="border-r-2 border-green-900 bg-green-400 w-full h-12"> border-r-2 </div> <div class="border-l-2 border-green-900 bg-green-400 w-full h-12"> border-l-2 </div> <div class="border-t-2 border-green-900 bg-green-400 w-full h-12"> border-t-2 </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA