Tailwind CSS - Borders

Previous
Quiz
Next

Tailwind CSS Borders covers a wide range of predefined classes for color, width, and radius, making it easy to style element borders.

Tailwind CSS Borders Reference

Below topics cover how to create and adjust borders on elements, including their color, width, style, radius, and more.

Topic Description Example
Tailwind CSS - Border Radius Border radius in Tailwind CSS controls the roundness of an element's corners.
Tailwind CSS - Border Width Border Width controls the thickness of an element's border with predefined size options.
Tailwind CSS - Border Color Border Color sets the color of the border around an element.
Tailwind CSS - Border Style Border Style sets the pattern of the border, like solid, dashed, or dotted.
Tailwind CSS - Divide Width Divide Width controls the thickness of the space between dividing lines in a layout.
Tailwind CSS - Divide Color Divide Color sets the color of the dividing lines between elements in a layout.
Tailwind CSS - Divide Style Divide Style sets the pattern of the dividing lines between elements.
Tailwind CSS - Outline Width Outline Width controls the thickness of the outline around an element.
Tailwind CSS - Outline Color Outline Color defines the color of the outline around an element.
Tailwind CSS - Outline Style Outline Style sets the type of line used for an element's outline, such as solid, dashed and more.
Tailwind CSS - Outline Offset Outline Offset controls the distance between an element's border and its outline.
Tailwind CSS - Ring Width Ring Width controls the thickness of the ring around an element.
Tailwind CSS - Ring Color Ring Color sets the color of the ring around an element.
Tailwind CSS - Ring Offset Width Ring Offset Width controls the distance between the ring and the border of an element.
Tailwind CSS - Ring Offset Color Ring Offset Color sets the color of the space between an elements border and its ring.

Example of Tailwind CSS Borders

Below examples will illustrate the tailwind css border classes, which can replace all the border related properties of CSS.

Example 1

In the following example, we will use various Tailwind CSS Border classes to style borders, including style, width, color, and divide properties.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Border Radius
    </h2>
    <p class="font-bold mb-3 underline">
        Different Border Radius Sizes:
    </p>
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div>
            <p class="underline">rounded-sm</p> 
            <div class="w-20 h-10 bg-green-400 rounded-sm"></div>
        </div>
        <div>
            <p class="underline">rounded</p> 
            <div class="w-20 h-10 bg-green-600 rounded"></div>
        </div>
        <div>
            <p class="underline">rounded-full</p> 
            <div class="w-20 h-10 bg-green-800 rounded-full"></div>
        </div>
    </div>
    <p class="underline mb-8">Use <strong>rounded-*</strong>
        for sizes md, lg, xl, 2xl, and 3xl.
    </p>
    <p class="font-bold mb-4 underline">
        Different Border Styles, Colors, and Widths:
    </p> 
    <div class="grid grid-cols-2 gap-5 mb-8">
        <div class="flex border-2 w-46 h-14 border-dashed 
            border-teal-500 items-center justify-center">
            Dashed Teal Border (2px)
        </div>
        <div class="flex border-2 w-46 h-14 border-dotted
            border-amber-500 items-center justify-center">
            Dotted Amber Border (2px)
        </div>
    </div>
    <p class="font-bold mb-4 underline">
        Different Divider Widths, Colors, and Styles:
    </p>
    <div class="space-y-4">
       <div class="divide-y-4 divide-double divide-black">
            <p><strong>4px Double divider</strong> example.
            </p>
            <p>Separates content with a double black color line.</p>
        </div>
    </div>
</body>

</html>

Example 2

In the following example, we will covers Tailwind CSS properties for Outlines and Rings, including color, style, width, offset, and offset color.

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Borders Examples
    </h2>
     <p class="font-bold mb-4 underline">
        Different Outline Widths, Colors, Styles and Offset:
    </p>
    <div class="gap-6 grid grid-cols-2 mb-8">
        <p class="border border-black outline outline-offset-2 
            outline-4 outline-indigo-600 outline-double">
            4px double indigo outline.
        </p>
        <p class="outline outline-offset-4 outline-pink-400
        border border-black">
            Offset-4px: pink outline.
        </p>
    </div>
    <p class="font-bold mb-5 underline">
        Different Ring widths and colors with Offset 
        widths and colors:
    </p>
    <div class="grid grid-cols-2 gap-5 mb-6">
        <p class="ring-2 ring-blue-500 ring-offset-4 
            border border-black rounded-md">
            2-pixel ring with offset-4.
        </p>
         <p class="ring-2 ring-emerald-600 ring-offset-4 border
            ring-offset-emerald-200 border-black rounded-md">
             Emerald ring offset color 
        </p>
    </div>
    <div class="flex justify-center mt-8 mb-10">
        <p class="ring ring-offset-8 ring-red-600 
            hover:ring-inset hover:ring-offset-8 ring-offset-red-200 
            border-black p-2 rounded-md hover:ring-purple-600 
            hover:ring-offset-purple-200 border border-black">
                8px red offset, turns purple inset on 
                <strong>Hover</strong> 
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next