Tailwind CSS Border Radius

23 Mar, 2022
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:
Tailwind CSS
Tailwind-Borders
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?