Color de borde CSS de Tailwind

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *