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>
tailwind 3 border
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>
tailwind 3 border-y
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>
Read Also
Tailwind CSS Border Radius Example
Tailwind CSS Border Width Example
Tailwind CSS Border Color Example
Tailwind CSS v3 border-x and border-y utilities example
Tailwind CSS Contact Us Form with Bottom Border
