#1 Data Analytics Program in India
₹2,499₹1,499Enroll Now
3 min read
Question 12 of 38easy

How to style Borders in Tailwind CSS?

Border width, radius, and colors.

What You'll Learn

  • Border width and sides
  • Border radius
  • Border colors

Border Width

index.htmlHTML
<div class="border">1px all sides</div>
<div class="border-2">2px all sides</div>
<div class="border-t-4">4px top only</div>
<div class="border-x">1px left and right</div>

Border Radius

index.htmlHTML
<div class="rounded">0.25rem</div>
<div class="rounded-lg">0.5rem</div>
<div class="rounded-full">Full (circle/pill)</div>
<div class="rounded-t-lg">Top corners only</div>

Border Colors

index.htmlHTML
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
<div class="border-b-2 border-red-500">Red bottom border</div>

Divide (Between Children)

index.htmlHTML
<div class="divide-y divide-gray-200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>