How to Add Rounded Corners to an Image in Tailwind CSS ?

Last Updated : 14 Oct, 2024

Adding rounded corners to an image in Tailwind CSS is an easy way to make your pictures look nicer. Instead of having sharp corners, you can give them smooth, rounded edges. Tailwind CSS has simple classes that let you choose how rounded the corners are, whether just a bit or completely round.

Approach

Start with a basic HTML setup and link to Tailwind CSS so you can use its styles.
Add a light gray background and some padding to the body to make it look nice.
Write headings for each type of rounded corners and insert images using Tailwind classes like rounded, rounded-lg, or rounded-full.
Open your file in a web browser to see how it looks, and make any changes if needed for better spacing or appearance.

Example 1: In this example, we will add rounded corners to an image

HTML

<!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="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded">

    <h2 class="text-xl font-semibold mb-4 mt-8">
        Moderately Rounded Corners
    </h2>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-lg">

    <h2 class="text-xl font-semibold mb-4 mt-8">
        Fully Rounded Corners (Circular Image)
    </h2>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-full">
</body>

</html>

Output

rounded-corners

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-lg class.
Rounding Bottom Corners: Similarly, to round only the bottom corners, use the rounded-b-lg class.
Rounding Left or Right Corners: To round the left or right corners, you can use rounded-l-lg or rounded-r-lg, respectively.

Example 1: In this example, we will create rounded corners at the top and bottom of an image.

HTML

<!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="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-t-lg">

    <h2 class="text-xl font-semibold mb-4 mt-8">
        Rounding Bottom Corners
    </h2>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-b-lg">
</body>

</html>

Output

rounded-corners-2

Example 2: In this example, we will add rounded corners to the left and right sides of the image.

HTML

<!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="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-l-lg">

    <h2 class="text-xl font-semibold mb-4 mt-8">
        Rounding Right Corners
    </h2>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads
              /20190710102234/download3.png" alt="Sample Image"
        class="rounded-r-lg">
</body>

</html>

Output

rounded-corners-3

How to Add Background Image Overlay in Tailwind CSS?

vkash8574

Improve

Article Tags :

How to Add Rounded Corners to an Image in Tailwind CSS ?

Approach

Applying Rounded Corners to Specific Corners

Similar Reads

Thank You!

What kind of Experience do you want to share?