Tailwind CSS Borders Complete Reference

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Border utility settings the radius, width, color, opacity, etc., of element’s borders. all the properties covered as in this class form.

Tailwind CSS Class	Description	Example
Border Radius	It is used to set the border-radius.	Try
Border Width	It sets the border width of all four sides of an element.	Try
Border Color	It is used to specify the border color of an element.	Try
Border Opacity	It describes the transparency of the element.	Try
Border Style	It is used for controlling the style of an element’s borders.	Try
Divide Width	It creates division between elements as a border.	Try
Divide Color	It is used to color any Divider.	Try
Divide Opacity	It sets the opacity of any divide.	Try
Divide Style	It sets the divide style of any divide.	Try
Ring Width	it sets the ring width of buttons.	Try
Ring Color	It is used to color any ring.	Try
Ring Opacity	It sets the opacity of any ring.	Try
Ring Offset Width	It is used to set the ring-offset width of buttons.	Try
Ring Offset Color	It is used to color any ring-offset.	Try

Below example will give you a brief idea about the Borders of Tailwind CSS:

Example:

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 Ring Opacity Class</b> 

    <div class="mx-16 grid grid-cols-5 gap-2 p-2"> 

        <button class="ring-0 ring-green-600 bg-green-400 

                    ring-opacity-25 w-full h-12 rounded-lg"> 

            Ring-0 

        </button> 

        <button class="ring-1 ring-green-600 bg-green-400 

                    ring-opacity-25 w-full h-12 rounded-lg"> 

            Ring-1 

        </button> 

        <button class="ring-2 ring-green-600 bg-green-400 

                    ring-opacity-25 w-full h-12 rounded-lg"> 

            Ring-2 

        </button> 

        <button class="ring-4 ring-green-600 bg-green-400 

                    ring-opacity-25 w-full h-12 rounded-lg"> 

            Ring-4 

        </button> 

        <button class="ring-8 ring-green-600 bg-green-400 

                    ring-opacity-25 w-full h-12 rounded-lg"> 

            Ring-8 

        </button> 

    </div> 

</body> 

</html>

Output:

Tailwind CSS Borders

Article Tags :

CSS

Web Technologies