Skip to main content

​
Overview

Control corner rounding with radius utilities. Border radius helps create softer, more modern designs and works together with border width, style, and color.

​
Border Radius Utilities

Border Radius

.rounded-none0border-radius: 0;Square corners
.rounded-sm4pxborder-radius: 4px;Small rounding
.rounded6pxborder-radius: 6px;Standard rounding
.rounded-lg8pxborder-radius: 8px;Large rounding
.rounded-xl12pxborder-radius: 12px;Extra large rounding
.rounded-2xl16pxborder-radius: 16px;Very large rounding
.rounded-full9999pxborder-radius: 9999px;Fully rounded (pills)

​
Examples

​
Basic Border Radius

<!-- Border radius examples -->
<div class="border-2 border-gray rounded-none p-4">Square corners</div>
<div class="border-2 border-gray rounded-sm p-4">Small rounding</div>
<div class="border-2 border-gray rounded p-4">Standard rounding</div>
<div class="border-2 border-gray rounded-lg p-4">Large rounding</div>
<div class="border-2 border-gray rounded-xl p-4">Extra large rounding</div>
<div class="border-2 border-gray rounded-full p-4">Fully rounded</div>

​
Buttons with Radius

<!-- Standard button -->
<button class="btn btn-blue rounded">Standard Button</button>

<!-- Large radius button -->
<button class="btn btn-blue rounded-lg">Large Radius Button</button>

<!-- Pill button -->
<button class="btn btn-blue rounded-full px-6">Pill Button</button>

​
Common Patterns

​
Cards with Radius

<!-- Standard card -->
<div class="card rounded-lg p-6">
  <h3 class="text-xl font-semibold mb-4">Card Title</h3>
  <p class="text-gray">Card content</p>
</div>

<!-- Extra rounded card -->
<div class="card rounded-xl p-6">
  <h3 class="text-xl font-semibold mb-4">Rounded Card</h3>
  <p class="text-gray">Card with extra rounding</p>
</div>

​
Form Inputs

<!-- Rounded input -->
<input type="text" class="w-full p-3 border border-gray rounded" placeholder="Rounded input">

<!-- Large radius input -->
<input type="text" class="w-full p-3 border border-gray rounded-lg" placeholder="Large radius input">

​
Images with Radius

<!-- Rounded image -->
<img src="image.jpg" class="rounded-lg" alt="Rounded image">

<!-- Fully rounded image (circle) -->
<img src="avatar.jpg" class="w-16 h-16 rounded-full object-cover" alt="Avatar">

​
Best Practices

  • Match border radius: Use consistent border radius values throughout your design
  • Small for subtle: Use small radius (4-6px) for subtle rounding
  • Large for emphasis: Use large radius (12-16px) for modern, soft designs
  • Full for pills: Use rounded-full for pill-shaped buttons and badges

Border Width

Border width utilities

Border Style

Border style utilities

Border Colors

Border color utilities

Borders Overview

Complete borders overview