Kenhuang Academy
  • English

      • Tailwind CSS Borders

      Borders are important tools for defining element outlines, separating content, and creating visual hierarchy. Tailwind provides a complete set of utility classes to finely control every aspect of borders.

      Border Width

      Use border-{width} utility classes to set the border width for all four directions.

      • border-0: border-width: 0px;
      • border: border-width: 1px; (most commonly used)
      • border-2, border-4, border-8

      You can also set the border width for a specific direction:

      • border-t-2: Top border
      • border-r-4: Right border
      • border-b-8: Bottom border
      • border-l-0: Left border
      <div class="border-2 ...">...</div>
<div class="border-b-4 ...">...</div>

      Border Color

      Use border-{color} to set the border color. You can use any color from the color palette.

      <input class="border-2 border-sky-500 ...">

<!-- Change border color on hover -->
<button class="border border-slate-300 hover:border-slate-400 ...">
  Save Changes
</button>

      Similar to background colors, you can also use border-opacity-{amount} to control the opacity of the border color.

      Border Style

      Use border-{style} to set the border style.

      • border-solid: (default) Solid line
      • border-dashed: Dashed line
      • border-dotted: Dotted line
      • border-double: Double solid line
      • border-none: No border
      <div class="border-4 border-dashed border-gray-200 ...">...</div>

      Border Radius

      Use rounded-{radius} to add rounded corners to elements.

      • rounded-none: No rounded corners
      • rounded-sm: Small rounded corners
      • rounded: Standard rounded corners
      • rounded-md: Medium rounded corners
      • rounded-lg: Large rounded corners
      • rounded-xl, rounded-2xl, rounded-3xl
      • rounded-full: Fully rounded, commonly used for creating circular avatars.

      You can also set rounded corners for each corner individually:

      • rounded-t-lg: Set rounded corners for only the top two corners.
      • rounded-r-xl: Set rounded corners for only the right two corners.
      • rounded-bl-2xl: Set rounded corners for only the bottom-left corner.
      • rounded-tr-full: Set rounded corners for only the top-right corner.
      <img class="rounded-full w-24 h-24" src="...">
<div class="rounded-t-lg bg-white shadow-md">...</div>

      Divide

      When you have a group of elements and want to add borders between them as dividers, you can use divide-{x|y}-{width} and divide-{color}.

      • divide-y: Add horizontal dividers between vertically arranged elements.
      • divide-x: Add vertical dividers between horizontally arranged elements.
      <div class="flex flex-col divide-y divide-gray-200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

      This is much more convenient than adding border-b to each element individually because it automatically skips the last element.

      Through these border tools, you can precisely add clear outlines and dividers to your components and layouts.