Tailwind CSS, a utility-first CSS framework, provides a highly efficient way to style web pages without having to leave your HTML. Among its many utilities, Tailwind offers a basic and powerful way to apply rounded corners to elements, including images. This feature enhances the visual appeal of images by softening their sharp edges, making them blend seamlessly into the design. This article explores how to create rounded corners on images using Tailwind CSS, covering all possible approaches with complete HTML code examples.
Basic Usage of Rounded Corners
Tailwind CSS comes with a set of predefined border-radius utilities that you can use to give your images rounded corners. The classes range from slightly rounded corners to completely circular images. Here’s how you can use them:
-
Slightly Rounded Corners: To apply slightly rounded corners to an image, use the
roundedclass. -
Moderately Rounded Corners: For more pronounced rounded corners, you can use classes like
rounded-lgorrounded-xl. -
Fully Rounded Corners (Circular Image): To create a circular image, that is fully rounded, use the
rounded-fullclass.
Note: For the rounded-full class to create a perfect circle, the image must be of equal width and height.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rounded Corners with Tailwind CSS</title>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 p-10">
<h2 class="text-xl font-semibold mb-4">
Slightly Rounded Corners
</h2>
<img src=
alt="Sample Image" class="rounded">
<h2 class="text-xl font-semibold mb-4 mt-8">
Moderately Rounded Corners
</h2>
<img src=
alt="Sample Image" class="rounded-lg">
<h2 class="text-xl font-semibold mb-4 mt-8">
Fully Rounded Corners (Circular Image)
</h2>
<img src=
alt="Sample Image" class="rounded-full">
</body>
</html>
|
Output
Applying Rounded Corners to Specific Corners
Sometimes, you might want to round only specific corners of an image. Tailwind CSS provides utilities for targeting individual corners or pairs of corners.
-
Rounding Top Corners: To round only the top corners of an image, you can use the
rounded-t-lgclass. -
Rounding Bottom Corners: Similarly, to round only the bottom corners, use the
rounded-b-lgclass. -
Rounding Left or Right Corners: To round the left or right corners, you can use
rounded-l-lgorrounded-r-lg, respectively.
Example 1: In this example, we will create rounded corners to the top and bottom of an image.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rounded Corners with Tailwind CSS</title>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 p-10">
<h2 class="text-xl font-semibold mb-4 mt-8">
Rounding Top Corners
</h2>
<img src=
alt="Sample Image" class="rounded-t-lg">
<h2 class="text-xl font-semibold mb-4 mt-8">
Rounding Bottom Corners
</h2>
<img src=
alt="Sample Image" class="rounded-b-lg">
</body>
</html>
|
Output
Example 2: In this example, we will add rounded corners to the left and right side of the image.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rounded Corners with Tailwind CSS</title>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 p-10">
<h2 class="text-xl font-semibold mb-4 mt-8">
Rounding Left Corners
</h2>
<img src=
alt="Sample Image" class="rounded-l-lg">
<h2 class="text-xl font-semibold mb-4 mt-8">
Rounding Right Corners
</h2>
<img src=
alt="Sample Image" class="rounded-r-lg">
</body>
</html>
|
Output