Tailwind CSS v3 border-x and border-y utilities example

Tailwind CSS 3 introduce new feature border-x and border-y utilities, for styling left/right and top/bottom borders a the same time. In this tailwind css v3 tutorial we will see border-x and border y utilities. border-x and border y with button & hover button, border-x and border y with card, pricing card with border-x and border-y example with Tailwind CSS.


Requirement

Tailwind CSS 3.0



Example 1

Simple use border-x and border-y utilities for button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwindcss v3</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
  </head>
  <body>
      <button class="px-4 py-2 bg-white border-green-600 border-x-2">Button</button>
      <button class="px-4 py-2 bg-white border-green-600 border-y-2">Button</button>
    </div>
    
  </body>
</html>

For hovered border-x and border-y

<button class="px-4 py-2 text-red-900 border-red-600 bg-red-50 hover:border-x-4">
  Button
</button>
<button class="px-4 py-2 text-red-900 border-red-600 bg-red-50 hover:border-y-4">
  Button
</button>



Example 2

Simple card with border-x and border-y.

<div class="max-w-lg border-blue-600 border-y-2">
  <div class="p-6 bg-white rounded shadow-md">
    <h2 class="text-2xl font-bold text-gray-800">Card </h2>
    <p class="text-gray-600">This is my new Card</p>
  </div>
</div>
<div class="max-w-lg border-blue-600 border-x-2">
  <div class="p-6 bg-white rounded shadow-md">
    <h2 class="text-2xl font-bold text-gray-800">Card </h2>
    <p class="text-gray-600">This is my new Card</p>
  </div>
</div>


Pricing Table with border-x and border-y

<div class="max-w-sm p-8 border-indigo-600 shadow-lg border-y-2">
  <h3 class="text-2xl text-center">Free Trial</h3>
  <p class="text-center">$ 0</p>
  <div>
    <ul class="space-y-4 list-disc">
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
    </ul>
    <div class="flex items-center justify-center mt-4">
      <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">
        Get Started
      </button>
    </div>
  </div>
</div>

<div class="max-w-sm p-8 border-indigo-600 shadow-lg border-x-2">
  <h3 class="text-2xl text-center">Free Trial</h3>
  <p class="text-center">$ 0</p>
  <div>
    <ul class="space-y-4 list-disc">
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
      <li>Lorem ipsum dolor sit amet consectetu</li>
    </ul>
    <div class="flex items-center justify-center mt-4">
      <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">
        Get Started
      </button>
    </div>
  </div>
</div>



Example 3

List style with border-x

<ul class="list-none">
  <li class="border-gray-700 border-y-2">List Item 1</li>
  <li>List Item 2</li>
  <li class="border-gray-700 border-y-2">List Item 3</li>
</ul>