Border

Tailwind CSS Borders

Tailwind CSS border utility classes provide a convenient way to add borders to elements within your website. Borders can be applied to different elements of HTML, including divs, buttons, images, and more, to improve their visual appearance and provide visual separation between different sections or elements.

You can add border properties like border styles, border width, border colors, rounded corners and border postions to your border element using tailwind utility classes.

How to add border in taiwind CSS?

To add borders using Tailwind CSS, you can use a combination of utility classes that control the style, width, color, and rounding of the border. Here's a step-by-step guide:

  • Firstly, Decide which html element you want to add the border to. It could be a <div>, <button>, <input>, or any other html element.
  • Apply border utility classes from Tailwind CSS with border properties if you want to add any. 

<p class="w-24 h-24 border border-solid border-indigo-600"></p>
<p class="w-24 h-24 border-t border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-r border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-b border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-l border-solid border-indigo-600 "></p>

Subtractive

Subtractive classes are used to remove borders, use following Tailwind border example. 

<p class="w-24 h-24 border border-solid border-indigo-600"></p>
<p class="w-24 h-24 border-t border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-r border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-b border-solid border-indigo-600 "></p>
<p class="w-24 h-24 border-l border-solid border-indigo-600 "></p>

Border Color

Change the border color using utilities built on our theme colors.Use below tailwind border color example to change color of border.

<p class="w-24 h-24 border-4 border-solid border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-solid border-gray-600 bg-gray-100 "></p>
<p class="w-24 h-24 border-4 border-solid border-red-600 bg-red-100"></p>
<p class="w-24 h-24 border-4 border-solid border-yellow-600 bg-yellow-100 "></p>
<p class="w-24 h-24 border-4 border-solid border-green-600 bg-green-100 "></p>

Border Width

Use below tailwind border width example where you can also apply border width according to requirement by using utility classes of tailwind.

<p class="w-24 h-24 border-0 border-solid border-indigo-600 bg-indigo-100"></p>
<p class="w-24 h-24 border   border-solid border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-2 border-solid border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-solid border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-8 border-solid border-indigo-600 bg-indigo-100 "></p>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Border radius

Add utility classes to an element to easily round its corners, In following exmaple of tailwind border radius shows how to give border radius in tailwind css.

rounded
rounded-t
rounded-r
rounded-b
rounded-l
rounded-tl
rounded-tr
rounded-bl
rounded-br
rounded-none 
<div class="w-32 h-32 rounded bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded</div>
<div class="w-32 h-32 rounded-t bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-t</div>
<div class="w-32 h-32 rounded-r bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-r</div>
<div class="w-32 h-32 rounded-b bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-b</div>
<div class="w-32 h-32 rounded-l bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-l</div>
<div class="w-32 h-32 rounded-tr bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-tr</div>
<div class="w-32 h-32 rounded-tl bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-tl</div>
<div class="w-32 h-32 rounded-br bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-br</div>
<div class="w-32 h-32 rounded-bl bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-bl</div>
<div class="w-32 h-32 rounded-none bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-none</div>

Border radius Sizes

Use following tailwind rounded border to easily round corners of any elements.

rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full 
<div class="w-32 h-32 rounded bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded</div>
<div class="w-32 h-32 rounded-t bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-t</div>
<div class="w-32 h-32 rounded-r bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-r</div>
<div class="w-32 h-32 rounded-b bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-b</div>
<div class="w-32 h-32 rounded-l bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-l</div>
<div class="w-32 h-32 rounded-tr bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-tr</div>
<div class="w-32 h-32 rounded-tl bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-tl</div>
<div class="w-32 h-32 rounded-br bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-br</div>
<div class="w-32 h-32 rounded-bl bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-bl</div>
<div class="w-32 h-32 rounded-none bg-indigo-500 flex items-center justify-center text-white text-base font-medium">rounded-none</div>

Border Style

Border Style classes are used to style borders in tailwind css border.

solid

dashed

dotted

double

hidden

none

<p class="w-24 h-24 border border-solid border-indigo-600 bg-indigo-100"></p>
<p class="w-24 h-24 border-4 border-dashed border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-dotted border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-double border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-hidden border-indigo-600 bg-indigo-100 "></p>
<p class="w-24 h-24 border-4 border-none border-indigo-600 bg-indigo-100 "></p>

Tailwind CSS Gradient Border

Add gradient border using tailwind css utility classes.

Pagedone

Pagedone

Pagedone

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="w-32 h-32 rounded-md bg-gradient-to-tr from-indigo-600 to-pink-600 p-0.5">
<div class="w-full h-full rounded-md bg-white  flex items-center justify-center">
<p class="text-lg font-manrope font-bold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text">Pagedone</p>
</div>
</div>
<div class="w-32 h-32 rounded-md bg-gradient-to-br from-indigo-600 to-pink-600 p-1">
<div class="w-full h-full rounded-md bg-white  flex items-center justify-center">
<p class="text-lg font-manrope font-bold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text">Pagedone</p>
</div>
</div>
<div class="w-32 h-32 rounded-md bg-gradient-to-tl from-indigo-600 to-pink-600 p-1.5">
<div class="w-full h-full rounded-md bg-white  flex items-center justify-center">
<p class="text-lg font-manrope font-bold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text">Pagedone</p>
</div>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More