<div class="border border-teal-600 bg-teal-400 p-8 inline-block"></div>
← Tailwind CSS classes list
Tailwind CSS class: .border
Preview
Use Shuffle AI to build your own Tailwind CSS templates
Quickly design stunning Tailwind CSS templates with the power of Shuffle AI — no coding required.
Check .border in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
CSS source
.border { border-width: 1px; }More in Tailwind CSS Borders
- .border-solid
- .border-dashed
- .border-dotted
- .border-double
- .border-none
- .border-0
- .border-2
- .border-4
- .border-8
- .border-*-# / .border-t-2
- .border-opacity-25 / border-*-#
- .divide-x
- .divide-x-0
- .divide-x-2
- .divide-x-4
- .divide-x-8
- .divide-y
- .divide-y-0
- .divide-y-2
- .divide-y-4
- .divide-y-8
- .divide-gray-100 / .divide-*-#
- .divide-x-reverse / .divide-*-reverse
- .divide-opacity-25 / .divide-opacity-*
- .border-collapse
- .border-separate
- .rounded / .rounded-*
- .border-b
- .border-b-0
- .border-blue-50
- .border-gray-50
- .border-green-50
- .border-indigo-50
- .border-l
- .border-l-0
- .border-opacity-0
- .border-pink-50
- .border-purple-50
- .border-r
- .border-r-0
- .border-red-50
- .border-t
- .border-t-0
- .border-yellow-50
- .rounded-2xl
- .rounded-3xl
- .rounded-b-2xl
- .rounded-b-3xl
- .rounded-b-xl
- .rounded-bl-2xl
- .rounded-bl-3xl
- .rounded-bl-xl
- .rounded-br-2xl
- .rounded-br-3xl
- .rounded-br-xl
- .rounded-l-2xl
- .rounded-l-xl
- .rounded-r-2xl
- .rounded-r-3xl
- .rounded-r-xl
- .rounded-t-2xl
- .rounded-t-3xl
- .rounded-t-xl
- .rounded-tl-2xl
- .rounded-tl-3xl
- .rounded-tl-xl
- .rounded-tr-2xl
- .rounded-tr-3xl
- .rounded-tr-xl
- .rounded-xl