rounded-none

The rounded-none class in Tailwind CSS removes all border-radius from an element. It forces the corners to be completely sharp, which is useful when you want to override inherited rounding or create a clean, square-cornered design.

Syntax

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

Example Code

<div class="bg-gray-200 p-4 rounded-none border">
  This box has no rounded corners.
</div>

Preview

Use rounded-none when you want sharp, square corners or need to override other border-radius utilities. It’s helpful for creating clean UIs, disabling rounding in specific cases, or working with strict design systems.