Styling Borders with Tailwind CSS
Tailwind CSS provides utilities for controlling the width, style, and radius of borders.
Border Width
Use the border- prefix followed by the width value.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Borders - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="border-2 border-gray-500 p-4">2px Border</div>
<div class="border-4 border-gray-500 p-4">4px Border</div>
</body>
</html>
Border Style
Use the border- prefix for default solid borders. For other styles like dashed or dotted, use the border-dashed or border-dotted classes.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Borders - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="border-2 border-dashed border-gray-500 p-4">Dashed Border</div>
<div class="border-2 border-dotted border-gray-500 p-4">Dotted Border</div>
</body>
</html>
Border Radius
Use the rounded- prefix followed by the size value to control the border radius.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Borders - Example 3</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="rounded-sm bg-gray-100 p-4">Small Border Radius</div>
<div class="rounded-md bg-gray-300 p-4">Medium Border Radius</div>
<div class="rounded-lg bg-gray-500 p-4">Large Border Radius</div>
<div class="rounded-full bg-gray-700 p-4">Full Border Radius</div>
</body>
</html>
Note
If you’re looking for specific design options for border radius, border style, or border width, you can refer to the Tailwind documentation below.
Everything was clear?
Thanks for your feedback!
Section 2. Chapter 4
Ask AI
Ask anything or try one of the suggested questions to begin our chat
