askvity

How to put border radius in Tailwind?

Published in Tailwind CSS Border Radius 3 mins read

To put border radius in Tailwind CSS, you use the built-in rounded utility classes. These classes allow you to quickly apply various levels of rounded corners to elements.

Applying Basic Border Radius

Tailwind provides a simple rounded class to apply a default border radius to all corners of an element:

<div class="rounded ...">
  <!-- Content goes here -->
</div>

You can also specify the size of the border radius using a scale:

  • rounded-sm
  • rounded (default)
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-3xl
  • rounded-full (creates a circle or oval)
  • rounded-none (removes border radius)

For example, to apply a large border radius:

<div class="rounded-lg ...">
  <!-- Content goes here -->
</div>

Applying Radius to Specific Corners

You can target individual corners or sides using prefixes:

  • rounded-t-{size}: Apply radius to top corners (top-left and top-right).
  • rounded-r-{size}: Apply radius to right corners (top-right and bottom-right).
  • rounded-b-{size}: Apply radius to bottom corners (bottom-right and bottom-left).
  • rounded-l-{size}: Apply radius to left corners (bottom-left and top-left).

And for specific single corners:

  • rounded-tl-{size}: Top-left corner.
  • rounded-tr-{size}: Top-right corner.
  • rounded-br-{size}: Bottom-right corner.
  • rounded-bl-{size}: Bottom-left corner.

Replace {size} with any size from the scale (e.g., sm, md, lg, full, none).

Example:

<div class="rounded-tl-xl rounded-br-xl ...">
  <!-- Radius on top-left and bottom-right -->
</div>

Controlling Radius Size

Tailwind's default configuration includes a border radius scale. You can see a typical scale mapping utility classes to CSS border-radius values:

Utility Class CSS border-radius
rounded-none 0px
rounded-sm 0.125rem
rounded 0.25rem
rounded-md 0.375rem
rounded-lg 0.5rem
rounded-xl 0.75rem
rounded-2xl 1rem
rounded-3xl 1.5rem
rounded-full 9999px

These values are based on the default Tailwind theme, which you can customize in your tailwind.config.js file if needed.

Responsive Border Radius

As highlighted by the reference, you can apply border-radius styles at specific breakpoints using the {screen}: prefix. This allows your element's border radius to change based on the screen size.

To apply a border radius specifically at a certain breakpoint (like md for medium screens and up), you prefix the utility class:

  • md:rounded-lg: Applies rounded-lg only when the screen size is md or larger.
  • sm:rounded-none: Removes any radius on small screens and up.

Example using reference information:

To apply a large border radius to elements only when the screen size is at the desktop breakpoint (md) or larger, you would use:

<div class="rounded-none md:rounded-lg ...">
  <!-- No radius by default, large radius on medium screens and up -->
</div>

This responsive approach gives you granular control over the appearance of your elements across different devices.

Applying border radius in Tailwind is straightforward using its utility classes, offering flexibility for overall, specific corner, and responsive styling.

Related Articles