Tailwind CSS Borders
In Tailwind CSS,Borders(Borders) are a common style in layout and design, used to add boundaries or dividing lines to elements.
Tailwind provides a variety of border utility classes to help you control border width, color, style, radius, and borders on each side.
Border Width
Border width determines the thickness of an element's border lines. Tailwind CSS provides different border width values, allowing you to quickly control the style of an element's borders.
| Class name | Description | Example |
|---|---|---|
border-{n} |
Sets all border widths,nto the width value |
border-2(width 2px) |
border-t-{n} |
Sets the top border width | border-t-4(top border width 4px) |
border-r-{n} |
Sets the right border width | border-r-8(right border width 8px) |
border-b-{n} |
Sets the bottom border width | border-b-1(bottom border width 1px) |
border-l-{n} |
Sets the left border width | border-l-3(left border width 3px) |
Border Color
By usingborder-{color}utility classes, you can set the color of an element's border. Tailwind CSS provides a large number of preset colors that can be used directly, and also supports custom colors.
| Class name | Description | Example |
|---|---|---|
border-{color} |
Sets the border color | border-red-500(red border) |
border-t-{color} |
Sets the top border color | border-t-blue-300(blue top border) |
border-r-{color} |
Sets the right border color | border-r-gray-400(gray right border) |
border-b-{color} |
Sets the bottom border color | border-b-green-600(green bottom border) |
border-l-{color} |
Sets the left border color | border-l-yellow-500(yellow left border) |
<div class="border-2 border-red-500 p-4"> 红色边框，宽度为 2px </div>
Border Style
Tailwind CSS also supports setting border styles, such as solid, dashed, dotted, etc. Throughborder-{style}utility classes, you can control the display style of borders.
| Class name | Description | Example |
|---|---|---|
border-solid |
Sets a solid border (default) | border-solid |
border-dashed |
Sets a dashed border | border-dashed |
border-dotted |
Sets a dotted border | border-dotted |
border-double |
Sets a double border | border-double |
<div class="border-4 border-dashed border-blue-400 p-4"> 蓝色虚线边框，宽度为 4px </div>
Border Radius
By settingborder-radius, you can control the rounded corner effect of an element. Tailwind CSS provides multiple border radius values and allows you to set different corner radii in different directions.
| Class name | Description | Example |
|---|---|---|
rounded-{size} |
Sets a uniform corner radius size | rounded-lg(large rounded corners) |
rounded-tl-{size} |
Sets the top-left corner radius | rounded-tl-sm(small rounded corner) |
rounded-tr-{size} |
Sets the top-right corner radius | rounded-tr-md(medium rounded corner) |
rounded-br-{size} |
Sets the bottom-right corner radius | rounded-br-lg(large rounded corner) |
rounded-bl-{size} |
Sets the bottom-left corner radius | rounded-bl-xl(extra-large rounded corner) |
<div class="border-4 border-gray-400 rounded-lg p-6"> 大圆角边框 </div>
Border control for four directions
You can individually control the border on each side (top, right, bottom, left), for example:border-t-2control the top border width,border-r-4control the right border width, etc.
| Class name | Description | Example |
|---|---|---|
border-t-{size} |
Sets the top border width | border-t-2(top border width 2px) |
border-r-{size} |
Sets the right border width | border-r-4(right border width 4px) |
border-b-{size} |
Sets the bottom border width | border-b-1(bottom border width 1px) |
border-l-{size} |
Sets the left border width | border-l-3(left border width 3px) |
<div class="border-t-4 border-r-2 border-b-1 border-l-3 border-blue-500 p-4"> 自定义各个方向的边框 </div>
Unified border control (Border)
If you want to set the same style for all borders, useborderutility class. You can combine other utility classes to control color, style, and width.
| Class name | Description | Example |
|---|---|---|
border |
Sets all borders to 1px width and solid | border(default width is 1px) |
border-2 |
Sets all border widths to 2px | border-2(solid line with 2px width) |
border-4 |
Sets all border widths to 4px | border-4(solid line with 4px width) |
<div class="border-4 border-solid border-green-500 p-4"> 绿色实线边框，宽度为 4px </div>
Inner and outer borders (Box Model)
Tailwind CSS also provides utilities for controlling thebox modelutility classes, especially for inner and outer borders, margins, and padding, etc.
| Class name | Description | Example |
|---|---|---|
box-border |
Sets the box model toborder-box(includes the border) |
box-border |
box-content |
Sets the box model tocontent-box(does not include the border) |
box-content |
<div class="box-border border-4 border-red-500 p-4"> 边框包含在内的盒子模型 </div>
Comprehensive example combining all border utilities
Example
<div class="border-4 border-red-500 p-4 mb-6">
4px wide red border
</div>
<!-- Border style -->
<div class="border-2 border-dashed border-blue-500 p-4 mb-6">
Blue dashed border with 2px width
</div>
<!-- Border radius -->
<div class="border-4 border-green-500 rounded-lg p-6 mb-6">
Green border with rounded corners
</div>
<!-- Border direction control -->
<div class="border-t-4 border-r-2 border-b-1 border-l-3 border-yellow-500 p-4">
Custom-direction border
</div>
Try it »