Esta clase acepta más de un valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad border-color de CSS . Esta clase se utiliza para especificar el color del borde de un elemento.
Clases de color de borde:
- border-transparent: El color del borde será transparente.
- border-current: el color del borde dependerá del color del elemento principal.
- border-black: El color del borde será negro.
- border-white: El color del borde será blanco.
- border-gray-50: El color del borde será gris.
- border-red-50: El color del borde será rojo.
- border-blue-50: El color del borde será azul.
- border-indigo-50: el color del borde será índigo.
- border-purple-50: El color del borde será morado.
- border-green-50: El color del borde será verde.
- border-yellow-50: El color del borde será amarillo.
- border-pink-50: El color del borde será rosa.
Nota: Los valores del color se pueden cambiar de acuerdo con su necesidad de 50 a 900, el intervalo debe ser 100, después de 100.
Sintaxis:
<element class="border-{color}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Color Class</b> <div class="mx-14 bg-green-200 grid grid-rows-4 grid-flow-col gap-2 text-justify p-2"> <p class="border-2 border-transparent p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-current text-red-600 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-white p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-black text-white p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-gray-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-red-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-indigo-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-blue-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-green-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-yellow-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-pink-700 p-2"> A Computer Science Portal for Geeks </p> <p class="border-2 border-purple-700 p-2"> A Computer Science Portal for Geeks </p> </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