Check out our free templates made with AI and polished to perfection in Windframe

Docs Import Blocks Full Pages Form Builder Pricing Support Refer and earn

rounded-tr: Tailwind CSS Border Radius class

The rounded-tr class in Tailwind CSS adds a default border radius to the top-right corner of an element.

rounded-tr

The rounded-tr class in Tailwind CSS adds a default border radius to the top-right corner of an element. It's useful when you want only that specific corner to have a smooth, rounded edge.

Syntax

html

<div class="rounded-tr">...</div>

Example Code

html

<div class="bg-teal-600 text-white font-semibold p-4 rounded-tr border">
  Only the top-right corner is rounded
</div>

Preview

Only the top-right corner is rounded

Use rounded-tr when you need to soften just the top-right corner of a box or container. It pairs well with other rounded-* classes for creating unique card shapes, panels, or UI sections.

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe