YouTip

In Tailwind CSS, **borders** are common styles in layout and design, used to add boundaries or dividers to elements. Tailwind provides various border utility classes to help you control the border width, color, style, radius, and borders in each direction. ### **Border Width** Border width determines the thickness of the border lines. Tailwind CSS provides different border width values, allowing you to quickly control the border style of elements. | Class | Description | Example | | --- | --- | --- | | `border-{n}` | Sets all border widths, `n` is the width value | `border-2` (width 2px) | | `border-t-{n}` | Sets top border width | `border-t-4` (top border width 4px) | | `border-r-{n}` | Sets right border width | `border-r-8` (right border width 8px) | | `border-b-{n}` | Sets bottom border width | `border-b-1` (bottom border width 1px) | | `border-l-{n}` | Sets left border width | `border-l-3` (left border width 3px) | ### **Border Color** By using the `border-{color}` utility class, you can set the border color of an element. Tailwind CSS provides a large number of preset colors that can be used directly, and also supports custom colors. | Class | Description | Example | | --- | --- | --- | | `border-{color}` | Sets border color | `border-red-500` (red border) | | `border-t-{color}` | Sets top border color | `border-t-blue-300` (blue top border) | | `border-r-{color}` | Sets right border color | `border-r-gray-400` (gray right border) | | `border-b-{color}` | Sets bottom border color | `border-b-green-600` (green bottom border) | | `border-l-{color}` | Sets left border color | `border-l-yellow-500` (yellow left border) | ### **Border Style** Tailwind CSS also supports setting border styles, such as solid, dashed, dotted, etc. Through the `border-{style}` utility class, you can control the display style of borders. | Class | Description | Example | | --- | --- | --- | | `border-solid` | Sets solid border (default) | `border-solid` | | `border-dashed` | Sets dashed border | `border-dashed` | | `border-dotted` | Sets dotted border | `border-dotted` | | `border-double` | Sets double border | `border-double` | ### **Border Radius** By setting `border-radius`, you can control the rounded corner effect of elements. Tailwind CSS provides various border radius values and allows you to set different rounded corners in different directions. | Class | Description | Example | | --- | --- | --- | | `rounded-{size}` | Sets uniform corner radius | `rounded-lg` (large corner) | | `rounded-tl-{size}` | Sets top-left corner | `rounded-tl-sm` (small corner) | | `rounded-tr-{size}` | Sets top-right corner | `rounded-tr-md` (medium corner) | | `rounded-br-{size}` | Sets bottom-right corner | `rounded-br-lg` (large corner) | | `rounded-bl-{size}` | Sets bottom-left corner | `rounded-bl-xl` (extra large corner) | ### **Border Control in Four Directions** You can individually control the border in each direction (top, right, bottom, left), e.g., `border-t-2` controls the top border width, `border-r-4` controls the right border width, etc. | Class | Description | Example | | --- | --- | --- | | `border-t-{size}` | Sets top border width | `border-t-2` (top border width 2px) | | `border-r-{size}` | Sets right border width | `border-r-4` (right border width 4px) | | `border-b-{size}` | Sets bottom border width | `border-b-1` (bottom border width 1px) | | `border-l-{size}` | Sets left border width | `border-l-3` (left border width 3px) | ### **Unified Border Control** If you want to set the same style for all borders, you can use the `border` utility class. You can combine it with other utility classes to control color, style, and width. | Class | Description | Example | | --- | --- | --- | | `border` | Sets all border widths to 1px, solid | `border` (default width 1px) | | `border-2` | Sets all border widths to 2px | `border-2` (2px solid) |