3 min read
•Question 12 of 38easyHow 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>