Border Radius and Sides in Tailwind CSS
Border Radius and Sides in Tailwind CSS
Tailwind CSS provides utilities to control the border radius of elements, allowing you to create rounded corners with ease. You can also target specific sides of an element for custom border radius settings.
1. Border Radius Utilities
Border radius utilities control how rounded the corners of an element are. Tailwind CSS provides a range of predefined radius values, which you can apply to all corners or individual corners of an element.
Utility Classes
rounded-{size}: Applies border radius to all corners of the element.
Common Border Radius Sizes:
rounded-sm: Small radius.rounded: Default radius.rounded-md: Medium radius.rounded-lg: Large radius.rounded-xl: Extra-large radius.rounded-2xl: 2x extra-large radius.rounded-3xl: 3x extra-large radius.rounded-full: Fully rounded (circular).
Example Usage:
Small Border Radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Small Border Radius Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-sm border border-gray-300 p-4">
Small border radius.
</div>
</body>
</html>
Fully Rounded Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fully Rounded Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-full border border-gray-300 p-4 w-32 h-32 flex items-center justify-center">
Fully rounded element.
</div>
</body>
</html>
2. Border Radius for Specific Sides
Tailwind also allows you to apply border radius to individual corners or sides of an element.
Utility Classes
rounded-tl-{size}: Applies border radius to the top-left corner.rounded-tr-{size}: Applies border radius to the top-right corner.rounded-br-{size}: Applies border radius to the bottom-right corner.rounded-bl-{size}: Applies border radius to the bottom-left corner.
Example Usage:
Top-Left Corner Radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top-Left Border Radius Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-tl-lg border border-gray-300 p-4">
Top-left corner has a large border radius.
</div>
</body>
</html>
Top-Right and Bottom-Left Corner Radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top-Right and Bottom-Left Border Radius Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-tr-xl rounded-bl-xl border border-gray-300 p-4">
Top-right and bottom-left corners have extra-large radius.
</div>
</body>
</html>
3. Border Radius for All Sides
You can also set different radius values for each side of an element using a combination of Tailwind’s utilities.
Example Usage:
Mixed Radius Values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixed Border Radius Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-tl-md rounded-tr-lg rounded-br-xl rounded-bl-2xl border border-gray-300 p-4">
Mixed border radius values for each corner.
</div>
</body>
</html>
Summary
- Border Radius Utilities:
rounded-{size}: Applies the same radius to all corners (e.g.,rounded-sm,rounded-md,rounded-full).rounded-tl-{size}: Top-left corner.rounded-tr-{size}: Top-right corner.rounded-br-{size}: Bottom-right corner.rounded-bl-{size}: Bottom-left corner.