askvity

How to Add Rounded Corners in Tailwind CSS?

Published in Tailwind CSS Styling 3 mins read

In Tailwind CSS, adding rounded corners to your HTML elements is incredibly simple and intuitive, utilizing a set of built-in utility classes.

Applying Rounded Corners

To add rounded corners to any element in Tailwind CSS, you add the class rounded- followed by a size to the element. This directly manipulates the CSS border-radius property for that element.

Tailwind provides a range of predefined sizes, allowing you to control the degree of rounding. These sizes typically correspond to increments on the default spacing scale, although the exact values can be customized in your tailwind.config.js file.

Available Rounded Sizes

Tailwind includes a variety of rounded-{size} classes:

  • rounded-none: Removes any rounded corners (border-radius: 0).
  • rounded-sm: Applies small rounded corners.
  • rounded: Applies default rounded corners.
  • rounded-md: Applies medium rounded corners (often used for slightly rounded corners, as mentioned in the reference).
  • rounded-lg: Applies large rounded corners.
  • rounded-xl: Applies extra-large rounded corners.
  • rounded-2xl: Applies larger rounded corners.
  • rounded-3xl: Applies even larger rounded corners.
  • rounded-full: Makes the corners completely rounded, creating a perfect circle for square elements or a pill shape for rectangular elements (border-radius: 9999px).

The available sizes range from none up to full, offering flexibility from sharp corners to perfectly circular shapes.

Basic Examples

Here are some practical examples of how to apply these classes:

  • Default Rounding:
    <div class="rounded bg-blue-500 p-4 text-white">
  This div has default rounded corners.
</div>
  • Medium Rounding:
    <div class="rounded-md bg-green-500 p-4 text-white">
  This div has medium rounded corners. (like rounded-md)
</div>
  • Full Rounding (Pill Shape):
    <button class="rounded-full bg-purple-500 px-4 py-2 text-white">
  This button has fully rounded corners.
</button>
  • Removing Rounding:
    <img src="..." class="rounded-none w-32 h-32" alt="Sharp corners">

Rounding Specific Corners

Tailwind also allows you to apply rounding to individual corners or sides using directional modifiers:

  • Per Side:

    • rounded-t-{size}: Top corners (border-top-left-radius, border-top-right-radius)
    • rounded-r-{size}: Right corners (border-top-right-radius, border-bottom-right-radius)
    • rounded-b-{size}: Bottom corners (border-bottom-right-radius, border-bottom-left-radius)
    • rounded-l-{size}: Left corners (border-top-left-radius, border-bottom-left-radius)

  • Per Corner:

    • rounded-tl-{size}: Top-left corner (border-top-left-radius)
    • rounded-tr-{size}: Top-right corner (border-top-right-radius)
    • rounded-br-{size}: Bottom-right corner (border-bottom-right-radius)
    • rounded-bl-{size}: Bottom-left corner (border-bottom-left-radius)

You can combine these classes and sizes as needed. For example, rounded-tl-lg rounded-br-full would apply a large radius to the top-left and a full radius to the bottom-right corner.

By using these straightforward utility classes, managing the border-radius property and adding different styles of rounded corners in your Tailwind CSS projects becomes quick and efficient.

Related Articles