How to Master Tailwind Border Radius for Sleek and Modern Designs

Creating a visually appealing user interface involves attention to detail, and one of the subtle but impactful ways to enhance your design is by using border-radius to create rounded corners. Tailwind CSS, a utility-first CSS framework, provides a comprehensive set of classes to control the border radius of elements easily. In this article, we’ll dive deep into how to master the Tailwind border radius to achieve sleek and modern designs.

Understanding Border Radius in Tailwind CSS

Before we start applying border-radius to our elements, it’s essential to understand how Tailwind CSS handles this property. Tailwind provides a set of default border-radius values that you can apply to any element. These values are part of Tailwind’s default theme configuration and can be customized if needed.

Default Border Radius Classes

Tailwind offers a range of classes for different border-radius sizes. Here’s a quick overview:

  • rounded-none: No border-radius, resulting in square corners.
  • rounded-sm: Small border-radius.
  • rounded: Default border-radius.
  • rounded-md: Medium border-radius.
  • rounded-lg: Large border-radius.
  • rounded-xl: Extra-large border-radius.
  • rounded-2xl: 2x extra-large border-radius.
  • rounded-3xl: 3x extra-large border-radius.
  • rounded-full: Fully rounded corners, typically creating a circle if the element has equal width and height.

Applying Border Radius to Specific Corners

Tailwind also allows you to target specific corners of an element:

  • rounded-t-*: Apply border-radius to the top corners.
  • rounded-r-*: Apply border-radius to the right corners.
  • rounded-b-*: Apply border-radius to the bottom corners.
  • rounded-l-*: Apply border-radius to the left corners.

Replace the asterisk (*) with the size of the border-radius you want to apply, such as sm, md, lg, etc.

Responsive Border Radius

Tailwind’s responsive design features enable you to apply different border-radius sizes at various breakpoints:

  • sm:rounded-*: Apply a border-radius at the small breakpoint.
  • md:rounded-*: Apply a border-radius at the medium breakpoint.
  • lg:rounded-*: Apply a border-radius at the large breakpoint.
  • xl:rounded-*: Apply a border-radius at the extra-large breakpoint.
  • 2xl:rounded-*: Apply a border-radius at the 2x extra-large breakpoint.

Customizing Border Radius

If the default sizes don’t meet your needs, you can customize the border-radius values in your tailwind.config.js file. Here’s how to add a custom border-radius:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'custom': '10px',

Now, you can use rounded-custom to apply your new border-radius.

How to Apply Tailwind Border Radius

Let’s put the theory into practice with some examples:

Basic Usage

To give an element a default border-radius:

<div class="rounded bg-blue-500 p-4">
  <!-- Your content here -->

Targeting Specific Corners

To round only the top-left and top-right corners:

<div class="rounded-t-lg bg-blue-500 p-4">
  <!-- Your content here -->

Responsive Design

To have a small border-radius on mobile and a larger one on desktop:

<div class="rounded-sm md:rounded-lg bg-blue-500 p-4">
  <!-- Your content here -->

Combining Classes

You can combine border-radius classes to achieve more complex shapes:

<div class="rounded-tl-full rounded-br-full bg-blue-500 p-4">
  <!-- Your content here -->

Best Practices for Using Tailwind Border Radius

  1. Consistency: Keep your border-radius consistent across similar elements to maintain a cohesive design.
  2. Responsiveness: Consider how border-radius will look on different screen sizes and adjust accordingly.
  3. Customization: Don’t hesitate to extend the default theme to include custom border-radius values that match your design requirements.
  4. Performance: Use the @apply directive in your CSS to reuse border-radius styles without adding unnecessary classes to your HTML.


Mastering the Tailwind border radius is all about understanding the available classes and knowing when and how to apply them to your elements. With the utility-first approach, you can quickly create modern and sleek designs that are responsive and consistent across your application.

For further reading on Tailwind CSS and its border-radius capabilities, check out the official Tailwind CSS documentation.

By leveraging Tailwind’s powerful and flexible border-radius utilities, you’re well on your way to designing beautiful, rounded elements that enhance the user experience of your web projects.

More Tailwind CSS Border Utilities


What do you think?