Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Tailwind CSS Borders Complete Reference

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.

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 


My Personal Notes arrow_drop_up
Last Updated : 28 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials