To set a large border radius in Tailwind CSS, you use the rounded-lg utility class.
Understanding Tailwind CSS Border Radius Utilities
Tailwind CSS provides a comprehensive set of utility classes to control an element's border-radius property. These classes are designed to be intuitive and cover various needs, from subtle curves to fully circular shapes. The rounded-lg class applies a predefined large border radius, which typically corresponds to 0.5rem (8px by default) in Tailwind's default design system.
Default Border Radius Scale
Tailwind CSS offers a progressive scale of border radius utilities, allowing you to choose the exact level of curvature you need. Here's a quick overview of common rounded-* classes and their typical effect:
| Utility Class | Description | Default Value (approx.) |
|---|---|---|
rounded-none |
No border radius (border-radius: 0px;) |
0px |
rounded-sm |
Small border radius (border-radius: 0.125rem;) |
2px |
rounded-md |
Medium border radius (border-radius: 0.375rem;) |
6px |
rounded-lg |
Large border radius (border-radius: 0.5rem;) |
8px |
rounded-xl |
Extra-large border radius (border-radius: 0.75rem;) |
12px |
rounded-2xl |
2x Extra-large border radius (border-radius: 1rem;) |
16px |
rounded-3xl |
3x Extra-large border radius (border-radius: 1.5rem;) |
24px |
rounded-full |
Fully circular border radius (border-radius: 9999px;) |
9999px |
For precise values and more details on customizing the border radius scale, refer to the official Tailwind CSS documentation on Border Radius.
How to Apply rounded-lg
Applying rounded-lg is straightforward: you simply add the class to the HTML element you wish to style.
Basic Application
To apply a large border radius to all corners of an element:
<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
This box has a large border radius.
</div>Applying to Specific Sides or Corners
Tailwind CSS also allows you to apply border radii to individual sides or even specific corners. To apply a large border radius to:
- Top:
rounded-t-lg - Bottom:
rounded-b-lg - Left:
rounded-l-lg - Right:
rounded-r-lg
For individual corners:
- Top-Left:
rounded-tl-lg - Top-Right:
rounded-tr-lg - Bottom-Right:
rounded-br-lg - Bottom-Left:
rounded-bl-lg
Example for specific corners:
<div class="bg-green-500 text-white p-4 rounded-tl-lg rounded-br-lg shadow-md">
This box has a large border radius on its top-left and bottom-right corners.
</div>Responsive Border Radius with Breakpoints
One of Tailwind's strengths is its utility-first approach to responsive design. You can apply different border radii at various breakpoints using the {screen}: prefix. This allows the border radius to adapt to different screen sizes.
To apply a large border radius to elements specifically at the desktop breakpoint (or larger), you would add the md:rounded-lg utility class. This means the element will have its default (or small screen) styling until the md (medium) breakpoint is reached, at which point rounded-lg will be applied.
Example of responsive border radius:
<div class="bg-purple-500 text-white p-4 rounded-sm md:rounded-lg shadow-md">
This box has a small radius on mobile, and a large radius on medium screens and up.
</div>In this example:
- On small screens, the box will have a
rounded-sm(small) border radius. - From the
mdbreakpoint onwards, therounded-lg(large) border radius will take effect, overridingrounded-sm.
By utilizing these utility classes, you gain precise control over the visual presentation of your elements across all screen sizes.
