Stylisation de Base - Bordures
Tailwind CSS fournit des utilitaires pour contrôler la largeur, le style et le rayon des bordures.
Largeur de la bordure
Utilisez le préfixe border- suivi de la valeur de largeur.
index.html
<!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>
Style de Bordure
Utilisez le préfixe border- pour des bordures solides par défaut. Pour d'autres styles comme pointillé ou en tirets, utilisez les classes border-dashed ou border-dotted.
index.html
<!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>
Rayon de Bordure
Utilisez le préfixe rounded- suivi de la valeur de taille pour contrôler le rayon de la bordure.
index.html
<!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>
Remarque
Si vous recherchez des options de conception spécifiques pour le rayon de bordure, le style de bordure ou la largeur de bordure, vous pouvez vous référer à la documentation Tailwind ci-dessous.
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 4
