rounded-br-full

Tailwind CSS border radius utility for creating rounded corners. The rounded-br-full class applies full border radius on bottom-right corner.

Class Information

CSS Class

rounded-br-full

CSS Properties

border-bottom-right-radius: 9999px;

Live Examples

Current Border Radius

100x100
<div class="rounded-br-full w-24 h-24 bg-blue-500">
  Content
</div>

Button Examples

<button class="rounded-br-full bg-blue-600 text-white px-6 py-3">
  Primary Button
</button>

Card Examples

Feature Card

This card demonstrates the border radius effect on a gradient background.

<div class="rounded-br-full bg-gradient-to-br from-purple-600 to-blue-600 p-6">
  <h4>Feature Card</h4>
  <p>Card content...</p>
</div>

Image Examples

Image
<img src="image.jpg" class="rounded-br-full w-32 h-32 object-cover" />

All Border Radius Options

Default (All Corners)

none0px
sm0.125rem
rounded0.25rem
md0.375rem
lg0.5rem
xl0.75rem
2xl1rem
3xl1.5rem
full9999px

Top

t
tl
tr

Bottom

b
bl
br

Left/Right

l
r

Start/End

s
e

Logical Corners

ss
se
es
ee

Usage Guidelines

✅ Common Use Cases:

  • Default (rounded-*): All corners - buttons, cards, containers
  • Top (rounded-t-*): Top corners - tabs, dropdowns
  • Bottom (rounded-b-*): Bottom corners - modals, tooltips
  • Left/Right (rounded-l/r-*): Side corners - button groups
  • Start/End (rounded-s/e-*): RTL-aware sides - international apps
  • Individual corners: Precise control - custom designs

💡 Pro Tips:

  • Button groups: rounded-s-lg + rounded-e-lg
  • Tabs: rounded-t-lg for active tab
  • Cards: rounded-t-lg for header, rounded-b-lg for footer
  • RTL support: Use rounded-s-* and rounded-e-* for international apps
  • Responsive: rounded-lg md:rounded-xl
  • Combine with overflow-hidden for images