The Tailwind Border Radius utility enables you to apply rounded corners to various elements such as buttons, cards, or containers. With Tailwind’s Border RSadius classes, you can achieve different levels of roundness based on your design requirements. In this guide, we will explore how to give a Tailwind Border Radius.
Table of contents
What Is Border Radius?
The border-radius property in CSS is used to round the corners of elements, creating a softer and more modern appearance. Tailwind CSS simplifies this with utility classes that allow you to quickly apply different levels of corner rounding to elements without writing custom CSS. It provides pre-defined classes for border-radius that are responsive, customizable, and easy to apply.
Key Takeaways
- Predefined Classes: Tailwind offers a wide range of classes for common and advanced use cases.
- Responsiveness: You can control the border-radius based on breakpoints.
- Customizable: You can define your own border-radius values in the
tailwind.config.jsfile:
module.exports = {
theme: {
extend: {
borderRadius: {
'extra-large': '2rem',
},
},
},
};
- No Custom CSS Needed: Tailwind eliminates the need to write separate CSS rules for styling corners.
Importance of Border Radius in Web Design
Border radius is one of the simplest yet most powerful properties in web design that can greatly impact the aesthetic and usability of a website. Besides, it is helpful to create round corners of elements like buttons, containers, cards, and other UI components. Additionally, when utilized correctly, border-radius can make a design feel more approachable, modern, and polished.
1. Visual Softness:
Border radius is a powerful tool in enhancing the aesthetic quality of web elements. By rounding the corners of a component, you create a softer, more approachable design. Furthermore, this also contributes to an overall more modern and friendly look, as sharp corners can sometimes feel rigid or harsh.
2. Consistency across all devices:
Responsive web design requires that your UI components look good on all screen sizes. Tailwind makes it easy to adjust the border radius responsively. Thus, ensuring that elements look consistent and proportional across devices.
3. Establishing Hierarchy and Focus :
Border radius also plays a role in creating a visual hierarchy. By using different levels of Tailwind border-radius, you can highlight certain elements and draw attention to more important parts of the design, such as call-to-action buttons or featured cards.
4. Creating Organic and Fluid Design:
Border radius is a key property when creating organic, fluid designs. Additionally, when combined with other utilities like padding, background colors, and shadows, border-radius helps create elements that feel natural, like buttons with soft corners or input fields with rounded edges. You can even experiment with these rounded UI elements while creating a digital flipbook using Flipsnack to better visualize. Additionally, this fluidity enhances the overall feeling of the website being modern and user-friendly.
5. Ease Of Customization:
Tailwind’s utility-first approach means you can customize border-radius values with precision. For quick experimentation with rounded corners on images, you can preview different looks in an online photo frame maker before committing the values in code. For more advanced image transformations before styling, some designers experiment with a Seedance 2 AI model to generate variations of the source image first. Besides, if you need a specific radius that is not available in the default Tailwind configuration. Thus, you can modify it easily through your project’s Tailwind config file.
Tailwind CSS Border Radius Utility Classes
Utilities for controlling the border radius of an element.
Classes & Properties
General
| Class | Properties |
| rounded-none | border-radius: 0px; |
| rounded-sm | border-radius: 0.125rem; /* 2px */ |
| rounded | border-radius: 0.25rem; /* 4px */ |
| rounded-md | border-radius: 0.375rem; /* 6px */ |
| rounded-lg | border-radius: 0.5rem; /* 8px */ |
| rounded-xl | border-radius: 0.75rem; /* 12px */ |
| rounded-2xl | border-radius: 1rem; /* 16px */ |
| rounded-3xl | border-radius: 1.5rem; /* 24px */ |
| rounded–full | border-radius: 9999px; |
Start-End
| Class | Properties |
| rounded-s-none | border-start-start-radius: 0px; border-end-start-radius: 0px; |
| rounded-s-sm | border-start-start-radius: 0.125rem; /* 2px */ border-end-start-radius: 0.125rem; /* 2px */ |
| rounded-s | border-start-start-radius: 0.25rem; /* 4px */ border-end-start-radius: 0.25rem; /* 4px */ |
| rounded-s-md | border-start-start-radius: 0.375rem; /* 6px */ border-end-start-radius: 0.375rem; /* 6px */ |
| rounded-s-lg | border-start-start-radius: 0.5rem; /* 8px */ border-end-start-radius: 0.5rem; /* 8px */ |
| rounded-s-xl | border-start-start-radius: 0.75rem; /* 12px */ border-end-start-radius: 0.75rem; /* 12px */ |
| rounded-s-2xl | border-start-start-radius: 1rem; /* 16px */ border-end-start-radius: 1rem; /* 16px */ |
| rounded-s-3xl | border-start-start-radius: 1.5rem; /* 24px */ border-end-start-radius: 1.5rem; /* 24px */ |
| rounded-s-full | border-start-start-radius: 9999px; border-end-start-radius: 9999px; |
| rounded-e-none | border-start-end-radius: 0px; border-end-end-radius: 0px; |
| rounded-e-sm | border-start-end-radius: 0.125rem; /* 2px */ border-end-end-radius: 0.125rem; /* 2px */ |
| rounded-e | border-start-end-radius: 0.25rem; /* 4px */ border-end-end-radius: 0.25rem; /* 4px */ |
| rounded-e-md | border-start-end-radius: 0.375rem; /* 6px */ border-end-end-radius: 0.375rem; /* 6px */ |
| rounded-e-lg | border-start-end-radius: 0.5rem; /* 8px */ border-end-end-radius: 0.5rem; /* 8px */ |
| rounded-e-xl | border-start-end-radius: 0.75rem; /* 12px */ border-end-end-radius: 0.75rem; /* 12px */ |
| rounded-e-2xl | border-start-end-radius: 1rem; /* 16px */ border-end-end-radius: 1rem; /* 16px */ |
| rounded-e-3xl | border-start-end-radius: 1.5rem; /* 24px */ border-end-end-radius: 1.5rem; /* 24px */ |
| rounded-e-full | border-start-end-radius: 9999px; border-end-end-radius: 9999px; |
Top-Left
| Class | Properties |
| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px; |
| rounded-t-sm | border-top-left-radius: 0.125rem; /* 2px */ border-top-right-radius: 0.125rem; /* 2px */ |
| rounded-t | border-top-left-radius: 0.25rem; /* 4px */ border-top-right-radius: 0.25rem; /* 4px */ |
| rounded-t-md | border-top-left-radius: 0.375rem; /* 6px */ border-top-right-radius: 0.375rem; /* 6px */ |
| rounded-t-lg | border-top-left-radius: 0.5rem; /* 8px */ border-top-right-radius: 0.5rem; /* 8px */ |
| rounded-t-xl | border-top-left-radius: 0.75rem; /* 12px */ border-top-right-radius: 0.75rem; /* 12px */ |
| rounded-t-2xl | border-top-left-radius: 1rem; /* 16px */ border-top-right-radius: 1rem; /* 16px */ |
| rounded-t-3xl | border-top-left-radius: 1.5rem; /* 24px */ border-top-right-radius: 1.5rem; /* 24px */ |
| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; |
| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px; |
| rounded-r-sm | border-top-right-radius: 0.125rem; /* 2px */ border-bottom-right-radius: 0.125rem; /* 2px */ |
| rounded-r | border-top-right-radius: 0.25rem; /* 4px */ border-bottom-right-radius: 0.25rem; /* 4px */ |
| rounded-r-md | border-top-right-radius: 0.375rem; /* 6px */ border-bottom-right-radius: 0.375rem; /* 6px */ |
| rounded-r-lg | border-top-right-radius: 0.5rem; /* 8px */ border-bottom-right-radius: 0.5rem; /* 8px */ |
| rounded-r-xl | border-top-right-radius: 0.75rem; /* 12px */ border-bottom-right-radius: 0.75rem; /* 12px */ |
| rounded-r-2xl | border-top-right-radius: 1rem; /* 16px */ border-bottom-right-radius: 1rem; /* 16px */ |
| rounded-r-3xl | border-top-right-radius: 1.5rem; /* 24px */ border-bottom-right-radius: 1.5rem; /* 24px */ |
| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; |
Bottom
| Class | Properties |
| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; |
| rounded-b-sm | border-bottom-right-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-b | border-bottom-right-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-b-md | border-bottom-right-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-b-lg | border-bottom-right-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-b-xl | border-bottom-right-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-b-2xl | border-bottom-right-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-b-3xl | border-bottom-right-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; |
Left
| Class | Properties |
| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px; |
| rounded-l-sm | border-top-left-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-l | border-top-left-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-l-md | border-top-left-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-l-lg | border-top-left-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-l-xl | border-top-left-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-l-2xl | border-top-left-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-l-3xl | border-top-left-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; |
Start-Start
| Class | Properties |
| rounded-ss-none | border-start-start-radius: 0px; |
| rounded-ss-sm | border-start-start-radius: 0.125rem; /* 2px */ |
| rounded-ss | border-start-start-radius: 0.25rem; /* 4px */ |
| rounded-ss-md | border-start-start-radius: 0.375rem; /* 6px */ |
| rounded-ss-lg | border-start-start-radius: 0.5rem; /* 8px */ |
| rounded-ss-xl | border-start-start-radius: 0.75rem; /* 12px */ |
| rounded-ss-2xl | border-start-start-radius: 1rem; /* 16px */ |
| rounded-ss-3xl | border-start-start-radius: 1.5rem; /* 24px */ |
| rounded-ss-full | border-start-start-radius: 9999px; |
| rounded-se-none | border-start-end-radius: 0px; |
| rounded-se-sm | border-start-end-radius: 0.125rem; /* 2px */ |
| rounded-se | border-start-end-radius: 0.25rem; /* 4px */ |
| rounded-se-md | border-start-end-radius: 0.375rem; /* 6px */ |
| rounded-se-lg | border-start-end-radius: 0.5rem; /* 8px */ |
| rounded-se-xl | border-start-end-radius: 0.75rem; /* 12px */ |
| rounded-se-2xl | border-start-end-radius: 1rem; /* 16px */ |
| rounded-se-3xl | border-start-end-radius: 1.5rem; /* 24px */ |
| rounded-se-full | border-start-end-radius: 9999px; |
End-End
| Class | Properties |
| rounded-ee-none | border-end-end-radius: 0px; |
| rounded-ee-sm | border-end-end-radius: 0.125rem; /* 2px */ |
| rounded-ee | border-end-end-radius: 0.25rem; /* 4px */ |
| rounded-ee-md | border-end-end-radius: 0.375rem; /* 6px */ |
| rounded-ee-lg | border-end-end-radius: 0.5rem; /* 8px */ |
| rounded-ee-xl | border-end-end-radius: 0.75rem; /* 12px */ |
| rounded-ee-2xl | border-end-end-radius: 1rem; /* 16px */ |
| rounded-ee-3xl | border-end-end-radius: 1.5rem; /* 24px */ |
| rounded-ee-full | border-end-end-radius: 9999px; |
| rounded-es-none | border-end-start-radius: 0px; |
| rounded-es-sm | border-end-start-radius: 0.125rem; /* 2px */ |
| rounded-es | border-end-start-radius: 0.25rem; /* 4px */ |
| rounded-es-md | border-end-start-radius: 0.375rem; /* 6px */ |
| rounded-es-lg | border-end-start-radius: 0.5rem; /* 8px */ |
| rounded-es-xl | border-end-start-radius: 0.75rem; /* 12px */ |
| rounded-es-2xl | border-end-start-radius: 1rem; /* 16px */ |
| rounded-es-3xl | border-end-start-radius: 1.5rem; /* 24px */ |
| rounded-es-full | border-end-start-radius: 9999px; |
Top-Left
| Class | Properties |
| rounded-tl-none | border-top-left-radius: 0px; |
| rounded-tl-sm | border-top-left-radius: 0.125rem; /* 2px */ |
| rounded-tl | border-top-left-radius: 0.25rem; /* 4px */ |
| rounded-tl-md | border-top-left-radius: 0.375rem; /* 6px */ |
| rounded-tl-lg | border-top-left-radius: 0.5rem; /* 8px */ |
| rounded-tl-xl | border-top-left-radius: 0.75rem; /* 12px */ |
| rounded-tl-2xl | border-top-left-radius: 1rem; /* 16px */ |
| rounded-tl-3xl | border-top-left-radius: 1.5rem; /* 24px */ |
| rounded-tl-full | border-top-left-radius: 9999px; |
Top-Right
| Class | Properties |
| rounded-tr-none | border-top-right-radius: 0px; |
| rounded-tr-sm | border-top-right-radius: 0.125rem; /* 2px */ |
| rounded-tr | border-top-right-radius: 0.25rem; /* 4px */ |
| rounded-tr-md | border-top-right-radius: 0.375rem; /* 6px */ |
| rounded-tr-lg | border-top-right-radius: 0.5rem; /* 8px */ |
| rounded-tr-xl | border-top-right-radius: 0.75rem; /* 12px */ |
| rounded-tr-2xl | border-top-right-radius: 1rem; /* 16px */ |
| rounded-tr-3xl | border-top-right-radius: 1.5rem; /* 24px */ |
| rounded-tr-full | border-top-right-radius: 9999px; |
Bottom-Right
| Class | Properties |
| rounded-br-none | border-bottom-right-radius: 0px; |
| rounded-br-sm | border-bottom-right-radius: 0.125rem; /* 2px */ |
| rounded-br | border-bottom-right-radius: 0.25rem; /* 4px */ |
| rounded-br-md | border-bottom-right-radius: 0.375rem; /* 6px */ |
| rounded-br-lg | border-bottom-right-radius: 0.5rem; /* 8px */ |
| rounded-br-xl | border-bottom-right-radius: 0.75rem; /* 12px */ |
| rounded-br-2xl | border-bottom-right-radius: 1rem; /* 16px */ |
| rounded-br-3xl | border-bottom-right-radius: 1.5rem; /* 24px */ |
| rounded-br-full | border-bottom-right-radius: 9999px; |
Bottom-Left
| Class | Properties |
| rounded-bl-none | border-bottom-left-radius: 0px; |
| rounded-bl-sm | border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-bl | border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-bl-md | border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-bl-lg | border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-bl-xl | border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-bl-2xl | border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-bl-3xl | border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-bl-full | border-bottom-left-radius: 9999px; |
Basic Usage
Rounded Corners
Rounded corners refer to the visual effect created when the sharp, 90-degree corners of an element are softened or curved using the border-radius property in CSS. Additionally, this effect also makes elements appear more modern, approachable, and visually pleasing. Use utilities like rounded-sm, rounded, or rounded-lg to apply different border-radius sizes to an element.
<div class="rounded ...">rounded</div>
<div class="rounded-md ...">rounded-md</div>
<div class="rounded-lg ...">rounded-lg</div>
<div class="rounded-full ...">rounded-full</div>FlyonUI Extended Border Radius
FlyonUI includes extended border radius utilities that adapt based on the active theme. Besides, this allows dynamic styling across different components. Additionally, these custom radius classes are used to give unique shapes to elements like tooltips, buttons, and cards.
You can apply any Tailwind border-radius utility, such as rounded-r-box or rounded-tr-btn, to fit these classes:
rounded-tooltip //var(–rounded-tooltip) for small components like tooltipsrounded-btn// var(–rounded-btn) for medium-sized elements like buttons and inputsrounded-box// var(–rounded-box) for large elements like cards and alerts
FlyonUI is the free Tailwind Components Library designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
Under the hood, it uses the strengths of:
- Tailwind CSS: A utility-first CSS framework that helps you build beautiful websites with ease.
- DaisyUI: adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier, and more Maintainable.
- Preline: JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more.
Features:
- JS plugins Support
- Semantic Components
- 800+ Free Components Examples
- Universal Framework Compatibility
- Unlimited Themes
- Unstyled & Accessible Plugins
- Responsive & RTL support
- Free Forever
- Beautiful and Semantic Styling
- Efficiency and Productivity
- Maintainable and Scalable
Also available in the pro version. It includes
Pill Buttons
Pill buttons are a type of button design characterized by their rounded, oval-like shape. They mimic the appearance of a pill, with completely rounded ends and a long, smooth body. Furthermore, these buttons are often helpful in web design to convey a friendly, modern, and approachable aesthetic. Use the rounded-full utility to create pill buttons.
<button class="rounded-full ...">Log In</button>No Rounded Borders
No Rounded in border-radius, means the corners of an element are sharp and not curved at all. Essentially, the border radius is set to 0, resulting in a standard rectangular or square appearance without any curvature. Use rounded-none to remove an existing border radius from an element.
<button class="rounded-none ...">Log In</button>Rounding Sides
This gives it a smooth, curved appearance instead of sharp, square edges to any specific side of an element. Besides, it can also be either the top, right, bottom, or left of an element. Use the rounded-t-*, rounded-r-*, rounded-b-*, and rounded-l-* utilities to only round one side of an element.
<div class="rounded-t-md ..."></div>
<div class="rounded-r-md ..."></div>
<div class="rounded-b-md ..."></div>
<div class="rounded-l-md ..."></div>Rounding Corners
This gives it a smooth, curved appearance instead of sharp, square edges to any specific corner of an element. Besides, it can be also either the top, right, bottom, or left of an element. Use the rounded-tl-*, rounded-tr-*, rounded-br-*, and rounded-bl-* utilities to only round one corner of an element.an element’s top, right, bottom, or left
<div class="rounded-tl-md ..."></div>
<div class="rounded-tr-md ..."></div>
<div class="rounded-bl-md ..."></div>
<div class="rounded-br-md ..."></div>Custom Border Radius
If you have specific border-radius values in mind that aren’t covered by the predefined classes, Tailwind CSS offers the flexibility to define custom values using the rounded utility. If you need to use a one-off border-radius value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="rounded-[35px_2px_70px_15px]...">Custom Border Radius For Each Corner</div>- In this, it represents like rounded-[(top-left)px_(top-right)px_(bottom-right)px_(bottom-left)px]
Check out the most blazing-fast Tailwind AI Builder – FlyonUI MCP. Craft stunning UI Components, Landing Pages, Blocks, Sections, and much more within seconds by simply providing prompts.
Advanced Border Radius Usage
It refers to customizing or extending the default rounded classes to create unique shapes, apply specific radii to individual corners, or implement complex designs such as Portfolio Cards(Inverted border-radius) or Complex shapes. Tailwind provides utilities for basic border-radius customization out of the box, and you can extend its functionality for advanced use cases. Here’s there are such examples of advanced border-radius that are mentioned below:
Portfolio Card
It is a modern profile card with a combination of soft and dynamic rounded corners. A large curved bottom-left corner (rounded-bl-[100px]) is used in the header to create a unique wavy effect, setting the design apart. Circular elements (rounded-full) are applied to the profile image, decorative shapes, and buttons, emphasizing harmony and elegance with fully rounded edges. The content section features a smooth wavy transition at the top (rounded-t-[50px]), adding softness and flow between sections. These border-radius styles collectively enhance the card’s visual appeal, providing a clean, modern, and engaging design.
Complex Shapes
Complex Shapes using border-radius are created by applying custom values to specific corners, allowing you to form unique, non-standard designs such as curves, waves, or blobs. Additionally, this is achieved using utilities like rounded-{side}-{value} or applying custom border-radius values through the [] syntax. Below are examples of complex shapes.
1. Flower with border-radius:
2. Cloud with border-radius:
3. Bulb with border-radius:
Tailwind CSS Border Radius Best Practices
Tailwind CSS provides utility classes to handle border-radius efficiently. Here are some best practices to follow:
1. Use Built-In Utilities:
- Default Values:
rounded-none,rounded-sm,rounded,rounded-md,rounded-lg,rounded-xl,rounded-2xl,rounded-3xl,rounded-full. - Per Corner:
- Top corners:
rounded-t-none,rounded-t-sm,rounded-t-lg, etc. - Bottom corners:
rounded-b-md,rounded-b-xl, etc. - Left corners:
rounded-l-lg,rounded-l-full, etc. - Right corners:
rounded-r-md,rounded-r-3xl, etc.
- Top corners:
- Individual Corners:
rounded-tl-lg,rounded-tr-sm,rounded-bl-full,rounded-br-none.
2. Use Logical Properties:
For layouts that need to adapt to both LTR and RTL directions, prefer logical utilities like rounded-s (start) and rounded-e (end) over physical utilities (rounded-l or rounded-r).
<div class="rounded-s-lg rounded-e-sm">
<!-- Logical border radii adapt based on text direction -->
</div>
3. Prefer Customization Only When Necessary:
Avoid over-customizing border radii unless absolutely required. Besides, Tailwind’s default scale covers most use cases. However, if you need custom values:
module.exports = {
theme: {
extend: {
borderRadius: {
'extra-lg': '1.5rem', // Custom border radius
},
},
},
};
Usage:
<div class="rounded-extra-lg">Custom Border Radius</div>Conclusion
In conclusion, Tailwind CSS provides a wide range of utilities for working with border radius, allowing you to achieve simple rounded corners as well as more creative, innovative shapes and effects. From elliptical and negative border radii to dynamic hover interactions and complex animations, Tailwind’s flexibility enables you to easily implement custom designs without the need for extensive custom CSS. By leveraging Tailwind’s responsive utilities and extending its configuration, you can explore even more advanced border radius techniques to create visually engaging and interactive user interfaces.
Tailwind CSS is a powerful tool that, when used creatively, can help you enhance the aesthetics and user experience of your web projects, providing you with an intuitive way to experiment and iterate on design ideas. Whether you’re looking for basic shapes or complex customizations, Tailwind makes it easier than ever to create visually compelling and functional designs with minimal effort.
