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.
Below example will give you a brief idea about the Borders of Tailwind CSS:
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
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
Last Updated :
07 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...