How to do rounded corners with Tailwind CSS

With Tailwind CSS, you can easily create rounded corners on an element:

Tailwind includes these CSS classes that you can use to control how intensely rounded the corners are (these get more rounded as the list goes on):

  • rounded-sm
  • rounded
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-3xl
  • rounded-full

In addition, Tailwind includes classes for rounding just one or two corners. These follow a similar sizing scale (md, lg, etc), but include extra letters for “top”, “bottom”, “left”, or “right”. Here are some examples:

  • rounded-t makes the top two corners rounded
  • rounded-bl-lg makes the bottom left corner quite rounded
  • rounded-tr makes the top right corner rounded

You can also combine these classes. For example, this CSS:

<div class="bg-blue-500 h-24 w-24 rounded-tr-3xl rounded-br-lg"></div>

produces this:

I’ve created a Tailwind Play sandbox that you can use to experiment with these classes.