Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use Tailwind Border Radius to Enhance Your Design

In design, as well as development, every single piece of the UI (User Interface) affects the user experience, in other words, every detail matters. This is true both for color palettes to layout, shapes of buttons, font choices, to border-radius of elements.

One often neglected detail is the use of border-radius to create rounded sides on elements like buttons, images, and divs in your web page.

Abishek Raj in his blog post titled “Psychology behind using Border Radius“, outlined the importance of border-radius on the user experience.

In this article, we will focus on how to effortlessly create a border radius using Tailwind CSS. I will walk you through understanding what border-radius is, I will list out the available radius utility classes, and also, show you some examples.

Let’s get started 🚀

Overview Overview of the Importance of Border Radius in Web Design

Border radius is part of CSS properties that gives you control to round the corners of an element. It is a simple yet powerful tool that can be used to create a variety of effects, such as making buttons look more inviting, softening the overall look of a website, and creating unique shapes.

There are several reasons why border-radius is important in web design:

  • Visual appeal: Rounded corners can make a website look more modern, inviting, and user-friendly. We see even top companies such as Tesla, Netflix, Prismic, Dribbble, Pinterest, and many more make use of border radius on their websites including on buttons, divs, and more.

  • Usability: Rounded corners can make it easier for users to interact with elements on a website, such as buttons and input fields.

  • Accessibility: Rounded corners can make a website more accessible to users with disabilities. For example, users with motor impairments may find it easier to tap on buttons with corners.

  • Branding: Border radius can be used to create a consistent visual identity for a website or brand. For example, a company could use corners throughout its website and branding materials to create a sense of unity and cohesion.

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of low-level CSS classes that can be used to build any design. It also provides several border-radius utilities, which can be used to easily round the corners of elements.

Tailwind CSS Border Radius

Getting Started with Border Radius Utilities

To get started with border-radius utilities in Tailwind CSS, you can use any of the defined border-radius CSS classes. These include .rounded, .rounded-sm, .rounded-md, .rounded-lg, and .rounded-xl. You can also use the .rounded-full class to create pill-shaped and circular elements.

To apply a border-radius utility to an element, simply add the appropriate CSS class to the element. To add a small border-radius to a button, you would add the .rounded-sm class to the button.

Here is an how to use border-radius utilities in Tailwind CSS:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

Understanding Border Radius in Tailwind

The border-radius utilities work by making the border-radius CSS property on the element to which they are applied. Additionally, the border-radius property controls the rounding of the corners of an element.

The border-radius utilities in Tailwind CSS are responsive by default, meaning that the rounding of the corners will be automatically adjusted based on the screen size. This is because the border-radius utilities use CSS variables to store the border-radius values.

The CSS variables for the border-radius utilities are defined in the tailwind.config.js file. You can customize these variables to create your border-radius values.

List of Available Border Radius Classes

The following is a list of the basic border-radius classes in Tailwind CSS:

Class NameDescription
rounded-smRounds the corners of an element slightly.
roundedRounds the corners of an element moderately.
rounded-mdRounds the corners of an element by default
rounded-lgRounds the corners of an element significantly.
rounded-xlRounds the corners of an element completely.
rounded-2xlRounds the corners of an element more than completely.
rounded-3xlRounds the corners of an element even more than completely.
rounded-fullRounds the corners of an element completely, creating a pill-shaped or circular element.
rounded-t-lgRounds the top corners of an element significantly.
rounded-r-lgRounds the right corners of an element significantly.
rounded-b-lgRounds the bottom corners of an element significantly.
rounded-l-lgRounds the left corners of an element significantly.

Examples of Using Border Radius Classes

The following are some examples of how to use border-radius classes in Tailwind:

<div class="m-4 inline-flex w-2/5 rounded-sm bg-blue-100 p-4">
  <h2>Rounded Small</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded bg-blue-100 p-4">
  <h2>Rounded Medium</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-md bg-blue-100 p-4">
  <h2>Rounded Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-lg bg-blue-100 p-4">
  <h2>Rounded Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-xl bg-blue-100 p-4">
  <h2>Rounded Extra Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-2xl bg-blue-100 p-4">
  <h2>Rounded 2x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-3xl bg-blue-100 p-4">
  <h2>Rounded 3x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-full bg-blue-100 p-4">
  <h2>Rounded Full</h2>
</div>
<div class="m-4 inline-flex w-2/5 rounded-sm bg-blue-100 p-4">
  <h2>Rounded Small</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded bg-blue-100 p-4">
  <h2>Rounded Medium</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-md bg-blue-100 p-4">
  <h2>Rounded Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-lg bg-blue-100 p-4">
  <h2>Rounded Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-xl bg-blue-100 p-4">
  <h2>Rounded Extra Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-2xl bg-blue-100 p-4">
  <h2>Rounded 2x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-3xl bg-blue-100 p-4">
  <h2>Rounded 3x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-full bg-blue-100 p-4">
  <h2>Rounded Full</h2>
</div>
<div class="m-4 inline-flex w-2/5 rounded-sm bg-blue-100 p-4">
  <h2>Rounded Small</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded bg-blue-100 p-4">
  <h2>Rounded Medium</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-md bg-blue-100 p-4">
  <h2>Rounded Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-lg bg-blue-100 p-4">
  <h2>Rounded Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-xl bg-blue-100 p-4">
  <h2>Rounded Extra Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-2xl bg-blue-100 p-4">
  <h2>Rounded 2x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-3xl bg-blue-100 p-4">
  <h2>Rounded 3x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-full bg-blue-100 p-4">
  <h2>Rounded Full</h2>
</div>
<div class="m-4 inline-flex w-2/5 rounded-sm bg-blue-100 p-4">
  <h2>Rounded Small</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded bg-blue-100 p-4">
  <h2>Rounded Medium</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-md bg-blue-100 p-4">
  <h2>Rounded Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-lg bg-blue-100 p-4">
  <h2>Rounded Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-xl bg-blue-100 p-4">
  <h2>Rounded Extra Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-2xl bg-blue-100 p-4">
  <h2>Rounded 2x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-3xl bg-blue-100 p-4">
  <h2>Rounded 3x Extra Large</h2>
</div>

<div class="m-4 inline-flex w-2/5 rounded-full bg-blue-100 p-4">
  <h2>Rounded Full</h2>
</div>

Explanations

  • Rounded Small: Slight curvatures around all four corners of the div. In regular CSS, this means adding 2px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded Medium: Medium curvatures around all four corners of the div. In regular CSS, this means adding 6px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded Large: Large curvatures around all four corners of the div. In regular CSS, this means adding 2px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

Extra Large

  • Rounded Extra Large: Extra large curvatures around all four corners of the div. In regular CSS, this means adding 12px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded Extra Extra Large: Extra extra large curvatures around all four corners of the div. In regular CSS, this means adding 2px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded 2x Extra Large: 2x extra large curvatures around all four corners of the div. In regular CSS, this means adding 16px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded 3x Extra Large: 3x extra large curvatures around all four corners of the div. In regular CSS, this means adding 24px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

  • Rounded Full: Full curvatures around all four corners of the div. In regular CSS, this means adding 9999px border top left radius, border top right radius, border bottom left radius, border bottom right radius to all corners.

TailwindCSS Rounded Borders

If you feel overwhelmed with writing your Tailwind components from scratch, we created a repository of 10k+ custom Tailwind components for you to quickly get started pitting your web project together in no time. Consider using our AI-generated custom components now.

Creating Pills and Circles

Using the rounded-full Utility to Create Pill and Circle Shapes

The rounded-full utility class in Tailwind CSS can be used to create pill-shaped and circular elements. To create a pill-shaped element, simply add the rounded-full class to the element’s HTML tag. For creating a pill-shaped button, you would add the following HTML:

<button class="rounded-full bg-blue-500 px-4 py-2 font-bold text-white">Click Me</button>

To create a circular element, simply add the rounded-full class to the element’s HTML tag and set the element’s width and height to be equal. To create a circular image, you would add the following HTML:

<button class="h-24 w-24 rounded-full bg-blue-500 px-4 py-2 font-bold text-white">Click Me</button>

Rounding Sides Separately

To round individual sides of an element in Tailwind CSS, you can use the following utility classes:

  • rounded-t-{size}: Rounds the top corners of an element.

  • rounded-r-{size}: Rounds the right corners of an element.

  • rounded-b-{size}: Rounds the bottom corners of an element.

  • rounded-l-{size}: Rounds the left corners of an element.

The size parameter can be any of the following values:

  • sm: Rounds the corners slightly.

  • md: Rounds the corners by default.

  • lg: Rounds the corners significantly.

  • xl: Rounds the corners completely.

To round all four sides of an element, you can use the rounded-{size} utility class.

Here are some examples of how to round individual sides of an element in Tailwind:

<div class="inline-flex w-2/5 rounded-t-lg bg-blue-100 p-4">
  <h2>Rounded Top Large</h2>
</div>

<div class="inline-flex w-2/5 rounded-r-lg bg-blue-100 p-4">
  <h2>Rounded Right Large</h2>
</div>

<div class="inline-flex w-2/5 rounded-b-lg bg-blue-100 p-4">
  <h2>Rounded Bottom Large</h2>
</div>

<div class="inline-flex w-2/5 rounded-l-lg bg-blue-100 p-4">
  <h2>Rounded Left Large</h2>
</div>

Rounding Sides in TailwindCSS

You can also combine border-radius utility classes to create custom border radius values. To create a custom border-radius, you can use the following border-radius utility classes:

  • rounded-tl-lg rounds just the top left corner with a large radius

  • rounded-tr-none removes rounding from the top right side.

  • rounded-br-xl applies extra large rounding to the bottom right side.

  • rounded-bl-sm applies small rounding to the bottom left side.

By mixing and matching these classes, you can create custom-shaped borders and rounded corners in Tailwind CSS. Here is how combining border-radius utility classes to create custom border radius values in Tailwind CSS:

<div class="rounded-bl-sm rounded-br-xl rounded-tl-lg rounded-tr-none border bg-blue-500 px-4 py-2 text-center font-bold text-white rounded-bl-lg">Custom Border Radius</div>

Responsive Border Radius

Responsive border-radius is a powerful technique that allows you to create web designs that look good on all devices, regardless of screen size. By applying border-radius at specific breakpoints, you can ensure that your elements have a consistent appearance and feel across all platforms.

To apply border-radius at specific breakpoints in Tailwind, you can use the {screen}: prefix. This prefix allows you to target specific screen sizes and apply different styles accordingly.

To apply a large border radius to elements at the desktop breakpoint, you would add the md:rounded-lg utility class. This will apply a border radius of 1.5rem to the element on devices with a screen width of 768px or greater.

You can also use the {screen}: prefix to target other breakpoints, such as small devices (sm), medium devices (md), large devices (lg), and extra large devices (xl).

Here are some examples of how to use a responsive border-radius in Tailwind:

<div class="rounded-lg bg-blue-500 px-4 py-2 text-center font-bold text-white md:rounded-none rounded-none">Responsive Border Radius</div>

Responsive Border Radius

To customize the default border-radius size utilities in Tailwind, you need to edit the borderRadius section of the Tailwind configuration file. This file is typically located at tailwind.config.js.

The borderRadius section of the configuration file is an object that contains the default border-radius sizes. To change the size of a border-radius, simply change the corresponding value in the object. To change the size of the rounded-md border-radius, you would change the value of the md property to the desired size.

Then, to add a new border-radius size, simply add a new property to the object with the desired size. To add a new border-radius size called rounded-xxl, you would add the following property to the object:

module.exports = {
  theme: {
    borderRadius: {
      sm: '0.5rem',
      md: '1rem',
      lg: '1.5rem',
      xl: '2rem',
      xxl: '2.5rem',
    },
  },
};

Once you have customized the borderRadius section of the configuration file, you can use the new border-radius size utilities in your project.

Responsive and Pseudo-class Variants

By default, Tailwind CSS generates responsive and pseudo-class variants for border-radius utilities. This means that you can use the same border-radius utilities at different breakpoints and for different pseudo-classes, such as :hover and :focus.

The following responsive and pseudo-class variants are generated for border-radius utilities by default:

  • Responsive variants:

    • sm:

    • md:

    • lg:

    • xl:

  • Pseudo-class variants:

    • :hover:

    • :focus:

    • :active:

    • &:disabled:

    • &:empty:

Modifying the variants for border-radius utilities in the tailwind.config.js file

You can modify the variants that are generated for border-radius utilities in the Tailwind configuration file. This file is typically located at tailwind.config.js.

To modify the variants for border-radius utilities, you need to edit the variants section of the configuration file. This section is an object that contains the variants that are generated for each core plugin.

To generate a new variant for a border-radius utility, simply add a new property to the variants object with the desired variant. To generate a :hover variant for the rounded-sm border-radius utility, you would add the following property to the variants object:

module. Exports = {
 //... other config options

 variants: {
    //... other variants

    'border-radius': ['responsive', 'hover'],
 },
}

This will generate two variants for the border-radius utility: responsive and hover. The responsive variant will apply the border-radius to all breakpoints, while the hover variant will only apply it when the element is hovered over.

You can also customize the values for the border-radius by adding a values key to the border-radius variant in the variants object.

module. Exports = {
 //... other config options

 variants: {
    //... other variants

    'border-radius': {
      responsive: true,
      values: {
        sm: '0.25rem',
        md: '0.5rem',
        lg: '1rem',
        xl: '2rem',
      },
    },
 },
}

This will generate four variants for the border-radius utility with different values for each breakpoint.

Once you have modified the variants section of the configuration file, you can use the new variant in your project.

Configuration to generate hover and focus variants for border-radius

Here is how Tailwind configuration file that generates hover and focus variants for border-radius utilities:

module.exports = {
 theme: {
    extend: {
      borderRadius: {
        'rounded-sm': '0.25rem',
        'rounded-md': '0.5rem',
        'rounded-lg': '1rem',
        'rounded-xl': '2rem',
      },
    },
 },
 variants: {
    borderRadius: ['hover', 'focus'],
 },
};

This configuration will generate hover and focus variants for the rounded-sm, rounded-md, rounded-lg, and rounded-xl border radius utilities.

You can use these variants in your project as follows:

<button class="rounded-md hover:rounded-lg focus:rounded-full"> Click Me </button>

This button will have a medium border-radius at the default breakpoint, a large border radius at the desktop breakpoint, and a rounded full border radius on hover and focus.

Disabling Border Radius

you may want to disable the border radius in your website, maybe because of some accessibility issues or because of browser support, in any case, if you need to disable the border-radius utilities in your Tailwind project, you can do so by setting the borderRadius property to false in the corePlugins section of the Tailwind configuration file.

The corePlugins section of the configuration file is an object that contains a list of the core plugins that are enabled in your project. To disable a core plugin, simply set the corresponding property to false.

To disable the border-radius utilities, you would add the following property to the corePlugins object:

module.exports = {
 //... other config options
 corePlugins: {
    //... other core plugins
    borderRadius: false,
 },
};

Once you have disabled the border-radius utilities, the border-radius utilities will be disabled in your project. With this configuration, the border-radius utilities will not be available in your project.

Use cases for disabling border-radius

There are a few reasons why you might want to disable the border-radius utilities in your Tailwind project:

  • To create a custom border-radius utility: You may want to create a custom border-radius utility that meets the specific needs of your project. By disabling the default border-radius utilities, you can prevent any conflicts between your custom utility and the default utilities.

  • To improve performance: Disabling the border-radius utilities can improve the performance of your Tailwind CSS build. This is because Tailwind CSS will not need to generate CSS for the border-radius utilities if they are not being used.

  • To reduce the size of your Tailwind CSS bundle: Disabling the border-radius utilities can also reduce the size of your Tailwind CSS bundle.** This is because Tailwind CSS will not need to include the CSS for the border-radius utilities in your bundle if they are not being us rounded bl lged.

Your Next Steps with Border Radius

Congratulations on learning about border-radius in Tailwind CSS! Here are some next steps you can take to continue your learning:

  • Experiment with the different border-radius utilities in your projects. This is the best way to learn how to use border-radius to create visually appealing and responsive web designs.

  • Read other articles and tutorials on Tailwind CSS border-radius. There are many great resources available online that can help you learn more about this topic.

  • Contribute to the Tailwind documentation. If you have any expertise in border-radius, consider contributing to the Tailwind documentation to help others learn about this topic.

  • Build a community of Tailwind users who are interested in learning more about border-radius. Join online communities and forums where you can discuss border-radius and other Tailwind topics with other users.

I have included a YouTube video below on the Tailwind Border:

Here are some specific project ideas that you can try:

  • Build a website with a variety of different border-radius sizes and styles. Experiment with using border-radius to create different shapes and effects, such as rounded buttons, pill-shaped cards, and circular images.

  • Create a responsive design that uses different border-radius sizes at different breakpoints. You could use a small border radius on small devices and a large border-radius on large devices.

  • Use border-radius to create animations and transitions. You could use border-radius to create a button that animates to a different shape when it is hovered over.

Just in case you still have trouble with TailwindCSS Border Radius, check out Purecode.ai custom-built TailwindCSS components

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.