Tailwind CSS Border Radius
Last Updated :
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=
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">
<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=
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=
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">
<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=
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">
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...