Skip to content
Related Articles

Related Articles

Tailwind CSS Border Radius

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
View Discussion
Improve Article
Save Article

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS border-radius property. This class is used to set the border-radius. 

Border Radius Classes:

  • rounded-none
  • rounded-sm
  • rounded
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-3xl
  • rounded-full
  • rounded-t-none
  • rounded-r-none
  • rounded-b-none
  • rounded-l-none
  • rounded-t-sm
  • rounded-r-sm
  • rounded-b-sm
  • rounded-l-sm
  • rounded-t
  • rounded-r
  • rounded-b
  • rounded-l
  • rounded-t-md
  • rounded-r-md
  • rounded-b-md
  • rounded-l-md
  • rounded-t-lg
  • rounded-r-lg
  • rounded-b-lg
  • rounded-l-lg
  • rounded-t-xl
  • rounded-r-xl
  • rounded-b-xl
  • rounded-l-xl
  • rounded-t-2xl
  • rounded-r-2xl
  • rounded-b-2xl
  • rounded-l-2xl
  • rounded-t-3xl
  • rounded-r-3xl
  • rounded-b-3xl
  • rounded-l-3xl
  • rounded-t-full
  • rounded-r-full
  • rounded-b-full
  • rounded-l-full
  • rounded-tl-none
  • rounded-tr-none
  • rounded-br-none
  • rounded-bl-none
  • rounded-tl-sm
  • rounded-tr-sm
  • rounded-br-sm
  • rounded-bl-sm
  • rounded-tl
  • rounded-tr
  • rounded-br
  • rounded-bl
  • rounded-tl-md
  • rounded-tr-md
  • rounded-br-md
  • rounded-bl-md
  • rounded-tl-lg
  • rounded-tr-lg
  • rounded-br-lg
  • rounded-bl-lg
  • rounded-tl-xl
  • rounded-tr-xl
  • rounded-br-xl
  • rounded-bl-xl
  • rounded-tl-2xl
  • rounded-tr-2xl
  • rounded-br-2xl
  • rounded-bl-2xl
  • rounded-tl-3xl
  • rounded-tr-3xl
  • rounded-br-3xl
  • rounded-bl-3xl
  • rounded-tl-full
  • rounded-tr-full
  • rounded-br-full
  • rounded-bl-full

Rounded corners: In this section, classes are covered that have been used to create rounded corners like rounded-sm, rounded-md, rounded-lg, etc, but not the fully circular or the pill shapes.

Syntax:

<element class="rounded-{Border-Radius}">...</element>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Radius Class</b>
      
    <div class="mx-4 grid grid-cols-3 gap-2 bg-green-200 p-2">
      
        <!-- First sub div is not for roundig-->
        <div class="rounded-none bg-green-400 w-48 h-12">
            rounded-none</div>
        <div class="rounded bg-green-400 w-48 h-12">
            rounded</div>
        <div class="rounded-sm bg-green-400 w-48 h-12">
            rounded-sm</div>
        <div class="rounded-md bg-green-400 w-48 h-12">
            rounded-md</div>
        <div class="rounded-lg bg-green-400 w-48 h-12">
            rounded-lg</div>
        <div class="rounded-xl bg-green-400 w-48 h-12">
            rounded-xl</div>
    </div>
</body>
  
</html>

Output:

Pills and circles: In this section, classes are covered that have been used to create full-circle and pills like rounded-full class.

Syntax:

<element class="rounded-full">...</element>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Radius Class</b>
      
    <div class="mx-24 grid grid-cols-3 gap-2 bg-green-200 p-2">
        <div class="rounded-full bg-green-400 py-3 px-6">
            rounded-full for Design Pill
        </div>
        <div class="rounded-full mx-32 bg-green-400 h-24 w-24
                flex items-center justify-center">
            rounded-full for Circle
        </div>
    </div>
</body>
  
</html>

Output:

Rounding sides separately: In this section, all the classes are covered which has been used to create one side rounded like rounded-t-lg, rounded-r-lg, rounded-b-lg, etc.

Syntax:

<element class="rounded-{t|r|b|l}{-size?}">...</element>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Radius Class</b>
      
    <div class="mx-4 grid grid-cols-2 gap-2 bg-green-200 p-2">
      
        <!-- First sub div is not for roundig-->
        <div class="rounded-t-lg bg-green-400 w-full h-12">
            rounded-t-lg</div>
        <div class="rounded-r-lg bg-green-400 w-full h-12">
            rounded-r-lg</div>
        <div class="rounded-l-lg bg-green-400 w-full h-12">
            rounded-l-lg</div>
        <div class="rounded-b-lg bg-green-400 w-full h-12">
            rounded-b-lg</div>
    </div>
</body>
  
</html>

Output:

Rounding corners separately: In this section, all the classes are covered which has been used to create one corner rounded like rounded-tl-lg, rounded-tr-lg, rounded-br-lg, etc.

Syntax:

<element class="rounded-{tl|tr|br|bl}{-size?}">...</element>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Radius Class</b>
      
    <div class="mx-4 grid grid-cols-2 gap-2 bg-green-200 p-2">
      
        <!-- First sub div is not for roundig-->
        <div class="rounded-tl-lg bg-green-400 w-full h-12">
            rounded-tl-lg</div>
        <div class="rounded-tr-lg bg-green-400 w-full h-12">
            rounded-tr-lg</div>
        <div class="rounded-bl-lg bg-green-400 w-full h-12">
            rounded-bl-lg</div>
        <div class="rounded-br-lg bg-green-400 w-full h-12">
            rounded-br-lg</div>
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!