Tailwind CSS Border Radius Tutorial for Beginners

Border radius helps you create modern, soft UI designs. Whether you are designing cards, buttons, modals, or images — rounded corners improve visual appearance and user experience.

In this tutorial, you will learn:

How to apply basic border radius
How to round specific sides
How to round individual corners
How to create pill buttons
How to use logical border radius properties
How to apply responsive border radius

Let’s begin step by step.

What is Border Radius in CSS?

Border radius controls how rounded the corners of an element are.

Traditional CSS example:

border-radius: 8px;

In Tailwind CSS, you apply it using utility classes like:

<div class="rounded-lg"></div>

Much cleaner and easier to maintain.

Basic Border Radius Utilities

Tailwind provides predefined rounded sizes:

rounded-xs (2px)
rounded-sm (4px)
rounded-md (6px)
rounded-lg (8px)
rounded-xl (12px)
rounded-2xl (16px)
rounded-3xl (24px)
rounded-4xl (32px)

Example (Using CDN)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10 space-y-4">

  <div class="rounded-sm bg-blue-500 text-white p-6">rounded-sm</div>
  <div class="rounded-lg bg-green-500 text-white p-6">rounded-lg</div>
  <div class="rounded-xl bg-purple-500 text-white p-6">rounded-xl</div>

</body>
</html>

This shows different levels of rounding.

Rounding Only Specific Sides

Sometimes you want to round only one side of an element.

Available utilities:

rounded-t-lg → round top side
rounded-r-lg → round right side
rounded-b-lg → round bottom side
rounded-l-lg → round left side

Example

<div class="rounded-t-lg bg-indigo-500 text-white p-6">
  Top rounded
</div>

<div class="rounded-b-lg bg-pink-500 text-white p-6">
  Bottom rounded
</div>

This is useful for cards and UI sections.

Rounding Individual Corners

You can round specific corners individually.

Examples:

rounded-tl-lg → top-left
rounded-tr-lg → top-right
rounded-bl-lg → bottom-left
rounded-br-lg → bottom-right

Example

<div class="rounded-tl-lg bg-gray-800 text-white p-6">
  Only top-left corner rounded
</div>

This gives you very precise design control.

Using Logical Border Radius (RTL Support)

If your website supports multiple languages like Arabic or Hebrew, logical properties are useful.

Utilities like:

rounded-s-lg
rounded-e-lg
rounded-ss-lg
rounded-se-lg

These automatically adjust based on text direction (LTR or RTL).

Example:

<div dir="ltr">
  <div class="rounded-s-lg bg-blue-500 text-white p-6">
    LTR Direction
  </div>
</div>

<div dir="rtl">
  <div class="rounded-s-lg bg-green-500 text-white p-6">
    RTL Direction
  </div>
</div>

This ensures proper rounding for multilingual websites.

Creating Pill Buttons (rounded-full)

To create fully rounded elements, use:

rounded-full

Example:

<button class="rounded-full bg-blue-600 text-white px-6 py-2">
  Save Changes
</button>

This is commonly used for buttons and profile images.

Removing Border Radius

If you want to remove rounding, use:

rounded-none

Example:

<button class="rounded-none bg-gray-700 text-white px-6 py-2">
  Square Button
</button>

Custom Border Radius Values

If predefined values are not enough, you can use custom values.

Example:

<div class="rounded-[20px] bg-gray-900 text-white p-6">
  Custom Border Radius
</div>

You can also use CSS variables:

<div class="rounded-(--my-radius)">
  Custom radius using CSS variable
</div>

This is useful in advanced design systems.

Responsive Border Radius

Tailwind follows a mobile-first approach.

Example:

<div class="rounded-sm md:rounded-lg lg:rounded-2xl bg-teal-600 text-white p-6">
  Responsive Border Radius
</div>

Explanation:

Mobile → small rounding
Medium screens → larger rounding
Large screens → extra-large rounding

This is useful for responsive cards.

Best Practices for Beginners

If you are learning Tailwind CSS:

Use rounded-lg or rounded-xl for modern UI
Use rounded-full for buttons and avatars
Avoid mixing too many different radius sizes
Keep design consistent across components
Test design on mobile and desktop

Frequently Asked Questions (FAQ)

What does rounded-lg mean in Tailwind?

It applies a border radius of 8px.

How do I create a circular image?

Use:

<img src="image.jpg" class="rounded-full size-32">

How do I round only the top corners?

Use:

rounded-t-lg

Can I apply border radius only on desktop?

Yes:

md:rounded-lg

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Border Style Tutorial for Beginners

Next: Tailwind CSS Text Shadow Tutorial for Beginners

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us